中文字体@font-face的导入

番茄西红柿发布于2019-04-23 13:44 / 739人阅读

摘要：既然中文字体很难转换，那么还有什么方法可以解决这个问题吗答案是有的。进入网址查找自己需要的字体，如思源黑体点击免费使用点击模式输入文字，点击生成之后，就可以看到转换为思源黑体的字了，同时我们还可以发现一个样式表的地址。

由于英文字母只有26个，所以生成.eot、.woff、.ttf、.svg等文件是比较小的，也就十几KB而已。但是对于汉字来说，常用的汉字就已经2500个了，生成的文件一般要2-3MB，如此庞大的包对页面的加载时非常不利的，因此网络上那些@font-face格式转换网站一般都不支持中文字体格式的转换，比如字客网、在线字体转换工具等等，这些网站上面看似可以转换@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:，不然请求肯定错误。
接下来就可以在需要的地方使用这种字体了！

GPU云服务器云服务器 font-face 包的导入java代码导入jstl包的语句 db数据库导入安卓的过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2272.html

AT - 规则：@import，@media 和 @font-face

摘要：规则它现在被广泛用作在网页中嵌入字体。支持新的规则，但是仅支持类型的字体。规则规则用来导入其它的文件。规则必须被放置在一个样式表的顶部，在任何其他规则上面。规则可用于样式应用到一个特定的媒体，如印刷品。 font-face 规则 @font-face 它现在被广泛用作在网页中嵌入字体。 @font-face { font-family: font of all knowledg...

levy9527 2019-08-30 15:53 评论0 收藏0
Web字体的初探

摘要：字体的初探一，字体基本概念的介绍字体的分类衬线体衬线在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束的地方有装饰。无论是还是下，不指定网页的中文字体时，默认的就是宋体。 Web字体的初探一，字体基本概念的介绍 1.1 字体的分类 1.1.1 Serif（衬线体） Serif（衬线）：在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束...

luckyyulin 2019-08-01 14:53 评论0 收藏0
ionic3开发——记一个使用自定义icon的方法

摘要：最近在使用和开发一款。期间遇到如何在项目中使用自定义图标字体文件的问题，经过研究，找到了一个解决方法，记录一下。然后，书写一份文件，内容如下字体名和路径等等，根据需要自定义就可以了。最近在使用ionic3和Angular开发一款App。开发体验还是挺好的。期间遇到如何在项目中使用自定义图标字体文件的问题，经过研究，找到了一个解决方法，记录一下。问题描述 ionic项目提供了一套丰富...

Rindia 2019-08-29 12:32 评论0 收藏0
ionic3开发——记一个使用自定义icon的方法

摘要：最近在使用和开发一款。期间遇到如何在项目中使用自定义图标字体文件的问题，经过研究，找到了一个解决方法，记录一下。然后，书写一份文件，内容如下字体名和路径等等，根据需要自定义就可以了。最近在使用ionic3和Angular开发一款App。开发体验还是挺好的。期间遇到如何在项目中使用自定义图标字体文件的问题，经过研究，找到了一个解决方法，记录一下。问题描述 ionic项目提供了一套丰富...

myshell 2019-08-20 16:17 评论0 收藏0
HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 评论0 收藏0