CSS远程加载字体

浏览数：38 / 时间：2015年06月09日

CSS 远程加载字体的方法，做网站CSS的都知道，用户浏览网站时，网页上的字体是加载本地的。换言之，如果网站使用了用户电脑所没有安装的字体，那显示字体就会被默认字体所代替了，自然效果就大受影响了。

上网搜索了下，这个问题，其实还是有解决办法的。那就是，准备一个或几个字体文件，放置到服务器上，再用 CSS 的方法把字体加载到网页中，这样，即使用户电脑中没有某一种字体，也可以正常显示！

以微软雅黑为例，一般来说，VISTA 系统和现在的 win7 系统都自带了这种字体，但 winXP 却没有。如果网站中运用了雅黑字体，win7 系统的用户访问能够正常显示，但 winXP 系统的用户访问，就不能显示，应该是用默认的宋体代替了。

加载字体文件的 CSS 方法，看这段代码：

body {font-family:’微软雅黑’}
@font-face {
font-family:微软雅黑;
src: url(‘微软雅黑.eot’); /* IE9 Compat Modes */
src: url(‘微软雅黑.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘微软雅黑.woff’) format(‘woff’), /* Modern Browsers */
url(‘微软雅黑.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘微软雅黑.svg#微软雅黑’) format(‘svg’); /* Legacy iOS */
}

系统字体的格式是ttf的，凡是以 IE 为内核的浏览器都不支持加载外部 .ttf 格式的字体！那怎么办啊？

那就改用eot吧，那怎么样把ttf转换成eot呢。这个给大家推荐个网址：http://ttf2eot.sebastiankippe.com/

好了，现在就来测试一下吧。

@font-face

语法：

@font-face { font-family : name ; src : url( url ) ; sRules }

说明：

name : 　字体名称
url : 　使用绝对或相对地址指定OpenType字体
sRules : 　样式表定义

设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。

示例：

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }