由于英文字母只有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. js类的笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. BZOJ3625: 小朋友和二叉树

    传送门 Sol 设 \(f_x\) 表示权值为 \(x\) 的二叉树的个数 设 \(s_x\) 表示是否有 \(x\) 这种权值可以选择 那么 \[f_n=\sum_{i=0}^{n}\sum_{j= ...

  3. Android Editable

    在android的sdk中有讲,“This is the interface for text whose content and markup can be changed (as opposed ...

  4. jquery 之事件 方法

    一.jquery事件 1 blur()       触发.或将函数绑定到指定元素的 blur 事件 2 change()     触发.或将函数绑定到指定元素的 change 事件 3 click() ...

  5. Integer ==判断遇到的问题

      今天开发过程中,遇到 这样的一个问题 public class Test { public static void main(String[] args) { Integer aa = 12345 ...

  6. AndroidUI多线程网络请求更新导致BUG

    昨天发现一个问题,以前做好的UI列表不用正常显示了,必须,下拉一下,才能加载内容,以前是页面自动加载第一屏幕的. 这个就不好了,只是给页面加了一个按钮啊,不应该造成这么大的问题. 按钮就是设置了一个位 ...

  7. Apache的主要目录和配置文件详解

    一.Apache 主要配置文件注释Apache的主配置文件:/etc/httpd/conf/httpd.conf默认站点主目录:/var/www/html/Apache服务器的配置信息全部存储在主配置 ...

  8. [NCH 1, 3]

    Preview: 1. Implement strStr() O(m*n): class Solution { public: int strStr(string haystack,string ne ...

  9. yum 安装 lnmp

    一. 系统 更新 yum -y update 二. 安装nginx 创建文件 vim /etc/yum.repos.d/nginx.repo 文件内容,这配置是安装最新的稳定版1.8 [nginx] ...

  10. 第一个c程序和vs2017 在打开MFC rc文件时找不到rcdll.dl

    第一个c程序 #include<stdio.h> int main() { ; ; printf_s("请输入两个数字:"); scanf_s("%d,%d& ...