由于英文字母只有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. JQuery漂浮广告代码

    <!doctype html><html><head><meta charset="utf-8"><title>jque ...

  2. 已有Web项目添加Maven支持

    IDE:MyEclipse 当我们在现有的Web开发项目中集成 Maven 的时候,需要修改以下几个地方: 1.将以下代码拷贝到工程根路径下的 .project 文件中的 <buildSpec& ...

  3. css预处理器(sass)

    学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条 ...

  4. 结对编程——Java实现黄金分割点游戏

    这是我和队员根据老师要求自创的一个人机黄金分割点游戏.这个小游戏在Windows10 下开发,用Eclipse做开发工具,实现语言是Java. 利用目前自己所学的Java知识实现了一人登录,电脑自行匹 ...

  5. 软工读书笔记 week4 ——《黑客与画家》下

    因为时间有限,只对书中后半部分几个篇章进行了阅读.        一.另一条路       作者以他自己为例,在那个没人知道什么叫“软件运行在服务器时”的时代,他和朋友选择创业时,没有选择写传统的桌面 ...

  6. HTML5离线存储之webstorage

    html5在引入webStorage之前,主要用cookies. html5的webstorage 分两种:LocalStorage 和SessionStorage,两者的差别主要在生命周期不同. 1 ...

  7. python笔记7-多线程threading之函数式

    前言 1.python环境3.62.threading模块系统自带 单线程 1.平常写的代码都是按顺序挨个执行的,就好比吃火锅和哼小曲这两个行为事件,定义成两个函数,执行的时候,是先吃火锅再哼小曲,这 ...

  8. Python学习---Python安装与基础1205

    1.0. 安装 1.1.1. 下载 官网下载地址:https://www.python.org/downloads/release/python-352/ 1.1.2. 配置环境变量 因为在安装的时候 ...

  9. Java学习---异常处理的学习

    基础知识 任何一门计算机程序设计语言都包括有绝对正确和相对正确的语句.绝对正确: 指任何情况下, 程序都会按照流程正确执行:相对正确: 程序的运行受到运行环境的制约, 在这种情况下, 需要附加检测和控 ...

  10. Chapter 4 Left Outer Join in MapReduce

    4.1 Introdution Consider a company such as Amazon, which has over 200 millions of users and possibly ...