• 中文字体@font-face的导入


    由于英文字母只有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;
    }

    切记,需要在每个url里面加上http:,不然请求肯定错误。
    接下来就可以在需要的地方使用这种字体了!



  • 相关阅读:
    js小数点失精算法修正
    ActiveX控件之ActiveXObject is not defined
    js通过日期计算属于星期几
    标准日期格式化
    js阿拉伯数字转中文大写
    RPC 原理的前生今世
    大型网站架构系列:20本技术书籍推荐
    Zookeeper核心机制
    建造者模式
    模板方法模式
  • 原文地址:https://www.cnblogs.com/nangxi/p/9020485.html
Copyright © 2020-2023  润新知