使用CSS3的font-face字体嵌入样式的方法讲解


Posted in HTML / CSS onMay 13, 2016

对于一个出色的网页,字体的选择是相对关键的,无奈设计师必须考虑用户的本地端是否有相应的字体,因此设计常常只能使用一些较为大众化的常见字体,而舍弃更加适合的字体。在 CSS3 中,这一情况将可以改变。CSS3 中引入了 font-face(嵌入字体类型),实验 font-face 可以把需要的字体上传到自己的服务器,再在服务器的网页中使用该字体并显示出来,无论浏览网页的用户的本地端是否有该字体。

语法:

CSS Code复制内容到剪贴板
  1. @font-face { font-family : name ; src : url ( url ) ; sRules }   

取值:
name  :? 字体名称。任何可能的 font-family 属性的值
url ( url )  :? 使用绝对或相对 url 地址指定OpenType字体文件
sRules  :? 样式表定义

说明:
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据,可以用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。

示例:
例如下面的效果:
使用CSS3的font-face字体嵌入样式的方法讲解

CSS Code复制内容到剪贴板
  1. @font-face {   
  2.     font-family'vanessalovesyoumedium';   
  3.     srcurl('vanessalovesyou-webfont.eot');   
  4.     srcurl('vanessalovesyou-webfont.eot?#iefix'format('embedded-opentype'),   
  5.          url('vanessalovesyou-webfont.ttf'format('truetype'),   
  6.     font-weightnormal;   
  7.     font-stylenormal;   
  8. }   
  9. #test-font {   
  10.     font-size24px;   
  11. }   
  12. #test-font span{   
  13.     font-family: vanessalovesyoumedium;   
  14. }  

使用 @font-face 定义字体所需要的文件,为了兼容各个浏览器,需要使用多种不同的字体格式,建议至少要有 .eot 和 .ttf 两种格式,.eot 用于 IE5+ ,.ttf 用于 Chrome 等现代浏览器,另外 .otf 也是不错的选择,也可以用于现代浏览器。

需要注意以下几点:
1.IE8及更早浏览器只支持微软自有的 .eot 格式
2.IE9.0-10.0部分支持 ttf 和 otf 字体格式
3.现代浏览器大多支持 .ttf 和 .otf 两种格式
4.现代浏览器需要从外部引用 @face-font 才能有效,IE 则可以直接在页面中使用 @face-font

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 #HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 #HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 #HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 #HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 #HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 #HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 #HTML / CSS
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python实现倒计时小工具
2019/07/29 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
医学院毕业生自荐信范文
2014/03/06 职场文书
2014年国庆节寄语
2014/09/19 职场文书
汉语拼音教学反思
2016/02/22 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Python之基础函数案例详解
2021/08/30 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js