由于英文字母只有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:,不然请求肯定错误。
接下来就可以在需要的地方使用这种字体了!

中文字体@font-face的导入的更多相关文章

  1. BMFont中文字体图集制作的方法~(for unity ngui)

    BMFont中文字体图集制作的方法~(for unity ngui) 好吧~似乎这个问题困扰了很多人,游戏开始中文化是个不错的事儿啊,这里我就做下说明,如何制作中文字体图集~ 这里的字库图集的制作更多 ...

  2. CentOS 7 安装字体库 & 中文字体

    前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效:  如上图可以看出,不仅没有中文字体,连字体 ...

  3. iOS 动态下载系统提供的中文字体

    使用系统提供的中文字体,既可避免版权问题,又可以减小应用体积 #pragma mark - 判断字体是否已经被下载 - (BOOL)isFontDownLoaded:(NSString *)fontN ...

  4. Win7下Eclipse中文字体太小

    http://www.cnblogs.com/newdon318/archive/2012/03/23/2413340.html 最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认 ...

  5. CSS,font-family,好看常用的中文字体

    例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",s ...

  6. 常用中文字体 Unicode 编码

    各大网站的字体选择 网站 字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 t ...

  7. PyOpenGL利用文泉驿正黑字体显示中文字体

    摘要:在NeHe的OpenGL教程第43课源代码基础上,调用文泉驿正黑字体实现中文字体的显示 在OpenGL中显示汉字一直是个麻烦的事情,很多中文书籍的文抄公乐此不疲地介绍各种方法及其在windows ...

  8. [CrunchBang]中文字体美化

    安装必要的字体包 sudo apt-get install ttf-droid ttf-wqy-zenhei xfonts-wqy ttf-wqy-microhei ttf-arphic-ukai t ...

  9. Eclipse的中文字体设置

    打开eclipse中文字体很小,简直难以辨认.在网上搜索发现这是由于Eclipse 用的字体是 Consolas,显示中文的时候默认太小了.解决方式有两种:一.把字体设置为Courier New  操 ...

随机推荐

  1. 【Codeforces】Helvetic Coding Contest 2017 online mirror比赛记

    第一次打ACM赛制的团队赛,感觉还行: 好吧主要是切水题: 开场先挑着做五道EASY,他们分给我D题,woc什么玩意,还泊松分布,我连题都读不懂好吗! 果断弃掉了,换了M和J,然后切掉了,看N题: l ...

  2. 浏览器组成、线程及event loop

    浏览器组成 User interface: a. Every part of the browser display, except the window. b. The address bar, b ...

  3. html5 区块与内联div 与span html块级元素

    HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...

  4. SignalR实时通信

    /// <summary> /// Message集线器类 /// </summary> [HubName("chathub")] public class ...

  5. android热加载随记

    在我们日常的开发过程中,程序难免会出现BUG,一般有集中处理方式,发布新版本APP让用户来升级,或者打补丁来修复bug 前者本文在这里不错讨论,打补丁升级又分为两种一种是需要重启应用,一种是不需要.不 ...

  6. PRINCE2认证与其他项目管理认证标准有何不同?

    国际项目管理协会 (IPMA)根据国际能力基线建立了一种国际公认的标准,并由其各国协会译成各国语言.这是IPMA四级证书的基础,现在已在全世界推广.可喜的是,PRINCE2与这个标准高度一致. 美国项 ...

  7. CSS中的line-height

    基本概念 行高.行距 行高是指文本行基线间的垂直距离.那什么是基线呢?记不记得vertical-align属性有个baseline值,这个baseline就是基线. 注意:倒数第二根才是基线(base ...

  8. linux下安装apache与php

    http://www.92csz.com/study/linux/16.htm 1.apache 在如下页面下载apache的for Linux 的源码包 http://www.apache.org/ ...

  9. Java学习---Collection的学习

    Collection基本方法的使用 package com.huawei.ftl; import java.io.File; import java.io.FileInputStream; impor ...

  10. ORA-12514

    ORA-12514: TNS:listener does not currently know of service requested in connect descriptor 监听器目前不知道在 ...