标签：css 字体渲染 外部字体 font 自定义字体 font-face
CSS 层叠样式表可以对页面进行更精细的样式设置，当然有些人就像自定义文字的字体，但是默认font-family 内置字体样式也就只有几种。
如何才能把第三方字体引入呢？
下面介绍一个CSS 规则 @font-face
@font-face是CSS3中的一个功能，它主要是把自定义的Web字体嵌入到网页中，让网页上使用的字体可以不受客户端字体库的限制。
这个功能是非常好用的，但是在使用中还是会碰到一点问题，主要就是IE下会出现一些问题。
来看看@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文档使用该字体，或取代客户端系统已有的同名字体。此文件可以使用 Microsoft WEFT
工具制作。
css示例：
@font-face {
font-family: my_monaco;
src=\‘#\‘" //***.cn/font/monaco.ttf);
}这样一来，font-family 就可以设置自己定义好的第三方字体 my_monaco 了。
测试：
调试界面报错，英文看不懂？ 没关系 我们换IE来试试
@font-face 跨源请求失败。资源访问受限。 也就是没权限
上面Chrome的说了，你应用的font源默认只允许自身域名使用，如果想外部域使用就必须在font服务器添加Access-Control-Allow-Origin http头部信息。
Access-Control-Allow-Origin 头信息,语法如下:
Access-Control-Allow-Origin: <origin> | *
origin参数指定一个允许向该服务器提交请求的URI。对于一个不带有credentials的请求,可以指定为‘*‘,表示允许来自所有域的请求.
举个例子：允许来自http://youku.com 域的请求，你可以这样指定：
Access-Control-Allow-Origin: http://youku.com
我这里测试就设置为全部了：
例如 Access-Control-Allow-Origin:*
那么接下来就可以在font服务器的http配置里面添加响应的头部信息。
添加完成后，再测试：
Chrome测试
字体可以正常显示，Chrome无报错。
IE11 测试：
IE控制台 无报错。
接下来我们换个字体。
IE 测试：
报错，未能完成OpenType嵌入 。
浏览器的兼容性
字体渲染是一件棘手的事情 - 尤其是老移动浏览器。你应该总是测试，你可以尽可能多的设备支持。发现问题的速度越快越好。
最后，请记住，使用许多不同的字体可能会减慢你的网站需要时间来加载所有这些字体！
并非所有的浏览器都支持@ font-face的！
目前，@ font-face的支持
Firefox Opera Chrome Safari IE9及其以上版本
这是你会说他不支持IE9以下的浏览器吗，不用担心，在旧的浏览器使用@ font-face时，不同的浏览器支持特定的字体文件。
不同的浏览器支持不同的字体格式渲染：
IE浏览器：EOT
Mozilla浏览器：OTF，TTF
Safari浏览器：OTF，TTF，SVG
opera：OTF，TTF，SVG
Chrome浏览器：TTF，SVG
@ font-face的资源
Font Squirrel
http://www.fontsquirrel.com/home
Font Squirrel是一个很棒的网站，你应该非常熟悉。Font Squirrel是一家集优质商业使用的免费字体供您下载。最重要的是，他们有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，为您提供不同的字体类型，你需要支持的每一个浏览器。
@ font-face的工具包
Font Squirrel的套件部分是现成的工具包，其中包括多种字体格式，CSS和HTML代码的集合。所有你必须做的是选择一个字体，下载工具包，并复制代码。这是简单，。最重要的是，他们有一个很大的选择充满了巨大的字体。
@ font-face的工具包生成器链接如下：
http://www.fontsquirrel.com/tools/webfont-generator
另一方面，你有工具包生成器，您上传您自己的字体，它为您提供了所需的所有代码。因为它创造了一个新的工具包为您的字体。所有你必须做的就是下载新的套件，并复制代码到您的网站。它也就是这么简单。然而，当使用自己的字体，请确保您有权利使用它- 不是所有的字体版权允许
最后：
为了使@font-face达到更多的浏览器支持，有一个独特的@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 */
}
/*format括弧里面的是字体后缀名即格式名*/
另外 ：现在国产浏览器的装机量很大，而国产双核浏览器兼容模式并不支持，可以通过以下方式直接强制切换到极速模式。
1，网页头部加入
<meta name=”renderer” content=”webkit”>
360浏览器就会在读取到这个标签后，立即切换对应的极速核。
2，另外为了保险起见再加入
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″ >
本文出自 “Professor哥” 博客，转载请与作者联系！
标签：css 字体渲染 外部字体 font 自定义字体 font-face
原文地址：http://professor.blog.51cto.com/996189/1682909
