使用CSS3的font-face字体嵌入样式的方法讲解
我要评论对于一个出色的网页，字体的选择是相对关键的，无奈设计师必须考虑用户的本地端是否有相应的字体，因此设计常常只能使用一些较为大众化的常见字体，而舍弃更加适合的字体。在 CSS3 中，这一情况将可以改变。CSS3 中引入了 font-face（嵌入字体类型），实验 font-face 可以把需要的字体上传到自己的服务器，再在服务器的网页中使用该字体并显示出来，无论浏览网页的用户的本地端是否有该字体。
语法：
- @font-face { font-family : name ; src : url ( url ) ; sRules }
取值：
name :? 字体名称。任何可能的 font-family 属性的值
url ( url ) :? 使用绝对或相对 url 地址指定OpenType字体文件
sRules :? 样式表定义
说明：
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据，可以用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。
示例：
例如下面的效果：
- @font-face {
- font-family: 'vanessalovesyoumedium';
- src: url('vanessalovesyou-webfont.eot');
- src: url('vanessalovesyou-webfont.eot?#iefix') format('embedded-opentype'),
- url('vanessalovesyou-webfont.ttf') format('truetype'),
- font-weight: normal;
- font-style: normal;
- }
- #test-font {
- font-size: 24px;
- }
- #test-font span{
- font-family: vanessalovesyoumedium;
- }
使用 @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
相关文章
- 这篇文章主要为大家介绍下css下的字体样式，font的属性与写法，需要的朋友可以参考下2014-01-28
- 这篇文章主要介绍了css常用样式font设置字体的多种变换,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-19
最新评论