css网页使用自定义字体方法
2014-12-20 17:45
671 查看
@font-face可以加载服务器端的字体到浏览器端,这样设计师就可以不受客户端字体库的限制。
一般来说有四种格式的字体文件即可覆盖所有浏览器。这四种格式为:
.EOT:适用于Internet Explorer 4.0+。
.TTF或.OTF:适用于Firefox 3.5、Safari、Opera。
.SVG:适用于Chrome、IPhone。
.WOFF:转为web字体指定的字体格式标准,被新版本浏览器广泛支持。
语法+举例:在css中如下写
在这里采用的是相对路径,当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到实际页面中去:
有了上的字体定义即可使用afish字体了。如下:
获取@font-face所需字体格式:
特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,同样需要第三方工具或者软件来实现,下面我给大家推荐一个工具Font Squirrel。
一般来说有四种格式的字体文件即可覆盖所有浏览器。这四种格式为:
.EOT:适用于Internet Explorer 4.0+。
.TTF或.OTF:适用于Firefox 3.5、Safari、Opera。
.SVG:适用于Chrome、IPhone。
.WOFF:转为web字体指定的字体格式标准,被新版本浏览器广泛支持。
语法+举例:在css中如下写
@font-face { font-family: 'afish'; src: url('../fonts/afish-webfont.eot'); src: url('../fonts/afish-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/afish-webfont.woff') format('woff'), url('../fonts/afish-webfont.ttf') format('truetype'), url('../fonts/afish-webfont.svg#afish') format('svg'); font-weight: normal; font-style: normal; }
在这里采用的是相对路径,当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到实际页面中去:
有了上的字体定义即可使用afish字体了。如下:
body{ font-family: afish; width: 100%; height: 100%; color: red; }
获取@font-face所需字体格式:
特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,同样需要第三方工具或者软件来实现,下面我给大家推荐一个工具Font Squirrel。
相关文章推荐
- 网页中使用自定义中文字体的解决方法
- css 自定义字体的使用方法
- css 使用@font-face 嵌入自定义字体或字体图标方法笔记
- 在HTML中使用CSS美化网页的三种方法
- 网页嵌入自定义字体方法
- iPhone开发中使用自定义字体的方法
- Android 中使用自定义字体的方法
- IOS 使用自定义字体的方法 (待续)
- 在HTML中使用CSS美化网页的三种方法
- 使用 Cufon 渲染网页字体(转载自ibm developerwork,在网页里引入特殊字体的方法,通过js实现字体渲染)(1)
- Android 中使用自定义字体的方法
- iphone游戏开发中使用自定义字体的方法
- Android 中使用自定义字体的方法
- 基于CSS的DIV网页设计 - 使用固定层方法设计网页
- 非网页安全字体不再依赖Cufon!CSS @font-face的使用
- 让用户自己控制网页字体的大小的css书写方法
- QWebView使用SIMSUN字体时,遇到网页按钮字体显示不正常处理方法
- iphone游戏开发中使用自定义字体的方法
- 30个使用自定义字体的网页设计作品优秀案例
- Android 中使用自定义字体的方法