CSS3 font-face使用
2019-02-17 01:48:56来源:博客园 阅读 ()
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
@font-face的语法规则:
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; [font-stretch: <stretch>]; [unicode-range: <unicode-range>]; }
font-family定义字体的名称,src用来指定字体文件地址,可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
字体格式有太多选择,不幸的是始终没有一个能在所有的浏览器上通用。这意味着,你必须使用多种字体的方案来保持用户跨平台的一致性体验。当前,在web上使用各种不同字体格式有:TTF、OTF、WOFF、EOT 和 SVG 。具体不同字体在各品牌浏览器的支持情况,这里不一一介绍。
在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }
但为了让各多的浏览器支持,你也可以写成:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }
使用@font-face定义自己的WEB字体如下:
@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg'); }
题外话
如何获取我们所需要的字体文件呢?其一,到付费网站购买字体;其二,到免费网站下载字体。当我们获取到字体,如何得到同一字体的.eot,.woff,.ttf,.svg字体格式。这里推荐一个网页工具font squirrel,它能有效帮助我们生成不同字体格式文件。比如,我们手上已经有目标字体的ttf格式文件,上传该ttf文件,font squirrel便能帮我们方便地生成其他字体格式文件。关于font squirrel的具体使用,请参考fjdingsd的博文,这里不再赘述。
原文链接:https://www.cnblogs.com/lxr860821/p/10373684.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- CSS中的float和margin的混合使用 2020-06-11
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash