网页使用定制字体

介绍

网页可以加载常用字体，但是对于小语种语言来说，如果没有配套的定制字体，字形显示会不正确，为了加载这类特殊定制字体，CSS提供了@font-face技术，锐英源在处理小语种时，使用了这个技术解决了特殊定制字体在网页内使用的问题。

@font-face

@font-face能够通过url属性指定定制字体，名称通过font-family属性设置。下面是演示：

@font-face {
    font-family: 'DARHA Cagan Tig';
    src: url('../assets/css/fonts/darha_cagan_tig-webfont.woff2') format('woff2'),
         url('../assets/css/fonts/darha_cagan_tig-webfont.woff') format('woff'),
        url('../assets/css/fonts/DARHA Cagan Tig.ttf') format('embedded-opentype');
        url('../assets/css/fonts/garcagtig.ttf') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Internet Explorer 9 只支持 .eot 类型的字体，Firefox、 Chrome、 Safari和 Opera 支持 .ttf 与.otf 两种类型字体。演示里的woff也是一种格式。为了支持多浏览器必须指定多个格式，比较麻烦。

格式转换

常见的字体格式是ttf，要想在IE下用，必须转换成eot。经验证后，Internet Explorer 11和Internet Explorer 9能够同样使用eot。

常见的转换工具是font2wbe，如果在转换时，提示错误，要重新创建和设置字体，要耐心处理字体。

在我们使用时，就遇到ttf可以，转成eot后没效果，开始还怀疑eot文件路径等问题，后来把别的网页上好用的eot放到测试环境下，显示能够正常，这时候才怀疑到是字体创建错误了。用正确的字体转换出来eot，用@font-face加载后，网页正常显示。

也可以在网页上进行字体转换，这里提供2个链接：

https://www.kirsle.net/wizards/ttf2eot.cgi

https://www.fontsquirrel.com/tools/webfont-generator

通过我的验证，第一个页面好用，第二个转换后，再转换还有个黑名单类的提示，比较奇怪。

错误提示

eot文件有错误时，并没有见到直接的加载错误类提示，这也是遇到问题不好查的原因。虽然没提示，懂字体的专家会看到显示效果不到位，这可以做为判断标准，不过程序员一般看不出来。