由于英文字母只有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. svg动画之日出

    效果分析 一个太阳,从底部升起来,天空由黑变蓝.那么要画的东西确定为三个:1.太阳(圆形)2.太阳光芒 3.天空 代码如下 <!--画太阳--> <svg width="6 ...

  2. Java EE大作业之创造class类出现问题-------Implicit super constructor Object() is undefined for default constructor. Mu

    这个学期一直在忙着考驾照的事情,眼看就要期末了.我的大学生活的最后一个大的作业也要来临了.说实话这个学期真的是没有之前的两个学期努力了.不知道是快要毕业的缘故还是真的是把心思用在了驾照上,想着在这次放 ...

  3. 用CSS3 & jQuery创建apple TV海报视差效果

    用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...

  4. 关于修改bug的思考

     作者:朱金灿 来源:http://blog.csdn.net/clever101 有软件就有bug,这意味着软件研发不仅仅是新功能开发,更要拿出相当一部分精力去修改bug.但基本很多软件开发者并 ...

  5. 30分钟掌握ES6/ES2015核心内容[上和下], 不错的说

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  6. 【转】OmniGraffle (一)从工具栏开始

    原文链接:http://www.jianshu.com/p/52f3ecbe8f2d OmniGraffle的软件布局和大多数图形类软件类似,中间是编辑区,左边是页面和对象组织的管理,右边是参数设置和 ...

  7. 排查 Azure 虚拟机的远程桌面连接问题

    与基于 Windows 的 Azure 虚拟机 (VM) 的远程桌面协议 (RDP) 连接可能会因各种原因而失败,使用户无法访问 VM. 问题可能出在 VM 上的远程桌面服务.网络连接或主计算机上的远 ...

  8. linux 下通过过 hbase 的Java api 操作hbase

    hbase版本:0.98.5 hadoop版本:1.2.1 使用自带的zk 本文的内容是在集群中创建java项目调用api来操作hbase,主要涉及对hbase的创建表格,删除表格,插入数据,删除数据 ...

  9. nginx+php+swoole安装记录

    领了台阿里服务器1vCPU 1G,做下测试研究. 系统 centos7,使用yum安装. Nginx yum install nginx ##开启nginx service nginx start 安 ...

  10. python 实现插入排序、冒泡排序、归并排序

    def InsertSort(A): '''插入排序算法:传入一个list,对list中的数字进行排序''' print('插入排序前list元素顺序:',A) length=len(A) for i ...