由于英文字母只有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. [POI2007]EGZ-Driving Exam

    能到达所有路的充要条件是能到达左右两端的路 用vector反向建边对每条路左右分别求个最长不上升子序列 预处理出每条路向左向右分别需要多建多少路才能到达最左端和最右端 然后跑个\(\Theta(n)\ ...

  2. HTTP协议笔记整理

    有人说过,精通HTTP协议能赢过95%的前端工程师,所以我毅然的踏上这条路,哈哈哈,接下来把自己的学习笔记整理出来. 我会从比较底层的模型开始: 1.网络的五层模型 2.TCP/IP协议 3.HTTP ...

  3. C#可遍历的集合

    public class Product { /// <summary> /// 自增ID /// </summary> public int ID { get; set; } ...

  4. Android学习笔记(4)----Rendering Problems(The graphics preview in the layout editor may not be accurate)

    在Android Studio中新建了一个 setting.xml 文件,布局好文件后,从 Text 界面切换到 Design 界面,显示了如下错误: 网上搜寻 The graphics previe ...

  5. (WCF) 利用WCF实现两个Process之间的通讯。

    目的: 实现两个独立的Process 之间的通讯. 实现思路: 建立一个WCF Service,然后将其Host到一个Console 程序中,然后在另外一个Console程序中引用WCF的Servic ...

  6. Android中使用异步线程更新UI视图的几种方法

    在Android中子线程是不能更新ui的. 所以我们要通过其他方式来动态改变ui视图, 1.runOnUiThreadactivity提供的一个轻量级更新ui的方法,在Fragment需要使用的时候要 ...

  7. Vue 框架-01- 入门篇 图文教程

    Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...

  8. Android实时获得经纬度,发送给c++服务端

    Android 客户端: package com.example.admin.gpsget; import android.Manifest; import android.content.Conte ...

  9. 计算机作业(HTML简单框架网页制作) 物联网 王罗红

  10. SRAM(静态)存储器芯片的读/写周期

    一. 要保证正确地读/写,必须注意CPU时序与存储器读/写周期的配合.一般存储器芯片手册都会给出芯片读/写周期的时序图. Intel 2114芯片的读.写周期时序如图所示. 二. 读周期 读操作时,必 ...