首页 > > 网页制作 > css >

中文字体@font-face的导入

2018-06-24 02:24:21来源：未知阅读 ()

由于英文字母只有26个，所以生成.eot、.woff、.ttf、.svg等文件是比较小的，也就十几KB而已。但是对于汉字来说，常用的汉字就已经2500个了，生成的文件一般要2-3MB，如此庞大的包对页面的加载时非常不利的，因此网络上那些@font-face格式转换网站一般都不支持中文字体格式的转换，比如字客网<https://www.fontke.com/tool/fontface/>、在线字体转换工具<http://www.sfont.cn/tools/font>等等，这些网站上面看似可以转换@font-face，但其实都是欺骗感情的，太大的文件上传不了到这个网站，或者是转化出来的文件根本就没有效果。
既然中文字体很难转换，那么还有什么方法可以解决这个问题吗？答案是有的。
既然2500个字太多了，那么我们为什么一定要把这些字体全部都转换了呢？我们转换我们在界面显示的时候需要的文字不就可以了吗？生成一个字体库，比如我需要在网页以“思源黑体”的字体显示“中文字体转换”这几个字，那么我们就生成这几个字的“思源黑体”字体库，这样就大大减小了字体包的大小了。
终于，在我的不辞辛劳之下，确认过眼神，终于发现一个网站"有字库"，就是这么做的。
进入网址查找自己需要的字体，如“思源黑体Regular”

点击免费使用

点击CSS模式

输入文字，点击生成之后，就可以看到转换为“思源黑体Regular”的字了，同时我们还可以发现一个样式表的地址。

选中这个地址然后访问，我们可以看到一串@font-face{}代码，这就是我们想要的。

@font-face {
    font-family: 'SiYuanRegular11ee5a9d511cc1a';  /*自定义字体名称*/
    src: url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.gif?r=74334960047');
    src: url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.gif?r=74334960047?#iefix') format('embedded-opentype'),/*IE6-IE8*/
    url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.png?r=74334960047') format('woff2'),
    url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.bmp?r=74334960047') format('woff'),/*现代所有浏览器*/
    url('//cdn.webfont.youziku.com/webfonts/nomal/117786/46827/5af4046ff629dd11a4d2bb8d.jpg?r=74334960047') format('truetype');/*Safari、Android、iOS*/
    font-weight: normal;
    font-style: normal;
}