使用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的特性改变文本选中时的颜色
Sep 11 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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实现小型站点广告管理(修正版)
2006/10/09 PHP
php部分常见问题总结
2008/03/27 PHP
mysql总结之explain
2012/02/27 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
js实现列表按字母排序
2020/08/11 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python中字符串的操作方法大全
2018/06/03 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python实现异步IO的示例
2020/11/05 Python
Python学习之time模块的基本使用
2021/01/17 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
结婚典礼证婚词
2014/01/11 职场文书
捐款倡议书范文
2014/02/02 职场文书
火箭队口号
2014/06/18 职场文书
就业协议书怎么填
2014/09/15 职场文书
初婚未育证明样本
2015/06/18 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang