让你的网站用上炫酷的中文字体
点击上方蓝色“程序猿DD”,选择“设为星标”
回复“资源”获取独家整理的学习资料!
作者 | 米开朗基杨
来源 | 公众号「云原生实验室」
随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。
例如,个人博客的首页字体:
CSS3 引入的 @font-face
这一属性可以很好的解决这个问题,可以帮助我们非常灵活的使用一些特殊的字体,即使用户电脑里面没有安装这个字体,网页也可以显示。
EOT
字体是 IE 浏览器的首选格式,其他浏览器都不支持;其他浏览器更钟爱常见的 TTF
、SVG
、WOFF
。
基本语法如下:
@font-face {font-family: <自定义一个字体的名称>;src: url('<下载好的字体,在电脑中保存的路径>');font-variant: <font-variant>;font-stretch: <font-stretch>;font-style: <style>;font-weight: <weight>;
例如:
@font-face {font-family: 'Lora';src: url('../fonts/STKaiti.eot'); /* IE9 Compat Modes */src: url('../fonts/STKaiti.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/STKaiti.woff2') format('woff2'), /* Super Modern Browsers */url('../fonts/STKaiti.woff') format('woff'), /* Modern Browsers */url('../fonts/STKaiti.ttf') format('truetype'), /* Safari, Android, iOS */url('../fonts/STKaiti.svg#STKaiti') format('svg'); /* Legacy iOS */font-style: normal;font-weight: normal;
}body {font-family: STKaiti;...
}
测试效果:Chrome,Firefox,IE7-IE11 均可以实现
01
字体难题
自定义中文字体虽炫酷,但有一个弊端,那就是中文字体太大了,很耗费资源,具体的原因其实很简单:英文只有 26 个字母,一张 ASCII 码表上 128 个字符集几乎可以表示任何英文语句。由于字符集小,字体文件也可以做的非常小;中文字体就完全不同,单单 GB2313
编码的中文字符(含符号)就达到 7445 个,字符数量是 ASCII
码表的 58 倍,而字体设计师需要为每一个中文字符设计字体,简单计算下,中文字体文件大小也几乎达到英文字体文件的数十倍。
02
解决思路
解决思路其实也很简单,只在字库中保留页面中出现的文字,将其他大量不用的文字删掉,生成一个只包含特定字符的小字体文件,便可以大大减少字体文件,从而提高访问速度。现在思路有了,那么有没有现成的工具呢?
03
裁剪工具
还真有。经过我一番搜寻,找到了两款工具:一个是华人开发的「字蛛[1]」,英文名 font-spider
,依赖 Node.js 环境,是一款命令行工具。主要思路是采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩。另一个是腾讯的大佬改版后的 font-soider,叫 font-spider-plus[2]。它们的工作原理如下:
我选择使用 font-spider-plus,毕竟改版过的,bug 更少,功能更多,还支持线上动态渲染的页面。唯一的不足就是官方文档写的太含糊了,许多人看了根本不知道怎么用。下面我将给我一个详细的范例,手把手教你如何使用 font-spider-plus。
04
font-spider-plus 使用方法
根据官方文档,要想使用 font-spider-plus,首先要在 CSS
文件中通过 @font-face
引入全量大小的特殊字体。具体怎么做呢?并没有说,我来告诉你。
书写 HTML 文件
首先我们新建一个文件夹用来放 html 文件:
$ mkdir index
然后在 index 目录中创建一个 index.html
文件,内容如下:
<div class="test">
米开朗基杨
</div>
<style>@font-face {font-family: 'font';src: url('../fonts/<font>.eot');src:url('../fonts/<font>.eot?#font-spider') format('embedded-opentype'),url('../fonts/<font>.woff2') format('woff2'),url('../fonts/<font>.woff') format('woff'),url('../fonts/<font>.ttf') format('truetype'),url('../fonts/<font>.svg') format('svg');font-weight: normal;font-style: normal;}.test{font-family: 'font';}
</style>
请将
<div class="test"> </div>
中的文字换成你自己的网站的文字。你可以选择将你的博客所有文章内容全选,然后粘贴到此处。下载你想使用的字体到
fonts
文件夹,然后将 index.html 中的<font>
换成你下载的字体的前缀。
特别说明:
@font-face
中的src
定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
下面是中文字体对应的英文名称:
新细明体:PMingLiU
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei装Office会多出来的一些字体:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei苹果电脑中的字体:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
丽黑 Pro:LiHei Pro Medium
丽宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果丽中黑:Apple LiGothic Medium
苹果丽细宋:Apple LiSung Light
压缩本地 WebFont
然后执行下面的命令来压缩本地 WebFont:
$ fsp local index/index.html
哦对了,你需要先通过 npm 安装 fsp 命令:
$ npm i font-spider-plus -g
压缩完成后,就会在 fonts 目录下生成压缩后的字体文件:
$ ll fonts/total 41328
-rw-rw-rw- 1 cnsgyg staff 7.7K 11 21 01:08 STKaiti.eot
-rw-rw-rw- 1 cnsgyg staff 8.2K 11 21 01:08 STKaiti.svg
-rw-rw-rw- 1 cnsgyg staff 7.6K 11 21 01:08 STKaiti.ttf
-rw-rw-rw- 1 cnsgyg staff 7.7K 11 21 01:08 STKaiti.woff
-rw-rw-rw- 1 cnsgyg staff 3.9K 11 21 01:08 STKaiti.woff2
压缩之前的字体文件会被移到 fonts
目录下的 .font-spider
目录:
$ ll fonts/.font-spidertotal 24880
-rw-rw-rw- 1 cnsgyg staff 12M 11 21 01:08 STKaiti.ttf
书写 CSS
现在字体压缩完了,怎么应用到自己的网站中呢?也很简单,先写个 CSS 通过 @font-faxe
引入压缩后的字体,格式与第一步中的 index.html 类似:
/* fonts-zh.css */
@font-face {font-family: 'font';src: url('../fonts/<font>.eot');src: url('../fonts/<font>.eot?#font-spider') format('embedded-opentype'),url('../fonts/<font>.woff2') format('woff2'),url('../fonts/<font>.woff') format('woff'),url('../fonts/<font>.ttf') format('truetype'),url('../fonts/<font>.svg') format('svg');font-weight: normal;font-style: normal;}
这样还不行,你还需要将压缩后的字体文件拷贝你的网站中,CSS 中通过相对路径要能找到这些字体文件。可我不想这么做,太麻烦了,我还想更简单点。
base64 编码
灵机一动,想到了 base64,编码之后可以不用拷贝这些字体文件,还能减少网站字体的加载体积,真是一箭双雕啊!具体的步骤我就不解释了,直接把所有步骤放到脚本中:
#!/bin/bashfont=STKaitieot=$(cat fonts/$font.eot|base64|tr -d '\n')
woff=$(cat fonts/$font.woff|base64|tr -d '\n')
woff2=$(cat fonts/$font.woff2|base64|tr -d '\n')
ttf=$(cat fonts/$font.ttf|base64|tr -d '\n')
svg=$(cat fonts/$font.svg|base64|tr -d '\n')cat > fonts-zh.css <<EOF
@font-face {font-family: '$font';src: url(data:application/font-eot;charset=utf-8;base64,$eot) format('eot');font-weight: normal;font-style: normal;
}
@font-face {font-family: '$font';src: url(data:application/font-woff2;charset=utf-8;base64,$woff2) format('woff2'),url(data:application/font-woff;charset=utf-8;base64,$woff) format('woff'),url(data:application/font-ttf;charset=utf-8;base64,$ttf) format('truetype'),url(data:application/font-svg;charset=utf-8;base64,$svg) format('svg');font-weight: normal;font-style: normal;
}
EOF
执行完上面的脚本后,就生成了一个 fonts-zh.css
,这是我们唯一需要的东西,不再需要任何额外的文件。
引入 CSS
最后一步就是在你的网站中引入该 CSS,具体的做法大同小异,以 hugo 为例,先将 fonts-zh.css
复制到网站主题目录的 static/css/
目录下,然后在 <head></head>
中引入该 css,以 beatifulhugo[3] 主题为例,直接在 layouts/partials/head_custom.html
中加上下面一行:
<link rel="stylesheet" href="{{ "css/fonts-zh.css" | absURL }}" />
最后让网站的 body 使用该中文字体,具体的做法是修改 body 的 css,以 hugo 的 beatifulhugo[4] 主题为例,修改 static/css/main.css
中的 body 属性:
body {font-family: STKaiti;...
}
可以再加上备用字体,例如:
body {font-family: STKaiti,Cambria;...
}
表示如果 STKaiti
字体不可用,将使用 Cambria
字体。到这里就大功告成了,具体的效果可以参考我的网站:https://fuckcloudnative.io/[5]。
05
总结
如果你没有强迫症,到这一步就大功告成了,可我还觉得不够简单,那么多步骤实在是太繁琐了,我要让它们全部自动化,把所有的步骤放到一个自动化脚本中。这还不够,为了造福大众,我在 GitHUb 中新建了一个仓库,所有的脚本和步骤都在上面,有需求的小伙伴可以拿去 happy 啦~~
项目地址:https://github.com/yangchuansheng/font-spider-plus[6]
06
参考资料
如何优雅的在网页里使用中文字体[7]
字蛛(font-spider)让你爱上 @font-face 网页自定义字体[8]
脚注
[1]
字蛛: http://font-spider.org/
[2]
font-spider-plus: https://github.com/allanguys/font-spider-plus
[3]
beatifulhugo: https://github.com/halogenica/beautifulhugo
[4]
beatifulhugo: https://github.com/halogenica/beautifulhugo
[5]
https://fuckcloudnative.io/: https://fuckcloudnative.io/
[6]
https://github.com/yangchuansheng/font-spider-plus: https://github.com/yangchuansheng/font-spider-plus
[7]
如何优雅的在网页里使用中文字体: https://juejin.im/entry/59780ba6f265da6c4c501f61
[8]
字蛛(font-spider)让你爱上 @font-face 网页自定义字体: https://blog.51cto.com/dapengtalk/1854181
本文通过OpenWrite的Markdown转换工具发布
关注我,回复“加群”加入各种主题讨论群
Redis 到底是怎么实现“附近的人”这个功能的呢?
Spring Boot构建多租户SaaS平台核心技术指南
有了这个IDEA插件,从此不用再开Postman了
7000字 Redis 超详细总结笔记总 | 收藏必备!
IDEA界面太丑??尝试一下这几个插件!
数据库分库分表解决方案汇总
朕已阅
让你的网站用上炫酷的中文字体相关推荐
- 4款神奇的黑科技网站,超级炫酷!各个都各显神通!
今天小编向大家推荐的这4款网站各个都是黑科技哦,千万不要错过了! I Remember http://i-remember.fr/en 4款神奇的黑科技网站,超级炫酷!各个都各显神通! 这款网站设计的 ...
- IDEA优化配置(6)--- 炫酷的主题字体颜色设置(基于Intellij IDEA 2018)
Intellij IDEA 2018/2019 优化配置.使用技巧.参数设置.快捷键汇总帖 IDEA 炫酷的主题字体颜色设置(基于IDEA 2018) 前言: IDEA中主题可以更换,大家可以直接到 ...
- IDEA主题配置--- 炫酷的主题字体颜色设置(基于Intellij IDEA 2018)
Intellij IDEA 2018/2019 优化配置.使用技巧.参数设置.快捷键汇总帖 IDEA 炫酷的主题字体颜色设置(基于IDEA 2018) 前言: IDEA中主题可以更换,大家可以直接到 ...
- coreldraw做生化标志_CorelDraw绘制炫酷的中文立体字海报
今天为大家分享CorelDraw绘制炫酷的中文立体字海报方法,教程很简单,适合新手来学习,步骤也不是很复杂,推荐过来,希望大家喜欢! 先看看效果图 第一.打上招聘两个字,选择一个喜欢的字体,如下. 第 ...
- cocos2dx 字体外发光_Ps教程:只需4个图层!即可制作出超炫酷的荧光字体
前段时间的霓虹灯火爆一时,频繁出现在各大商场里,成为众多游客拍照打卡的网红灯.相信有去过商场的朋友们肯定都有见过这些霓虹灯,反正小编是去打卡过了,拍起照来简直不要太好看,又酷又炫,小编可真是太喜欢了. ...
- 有了它,从此走上炫酷的编码之路!
python IDE python开发工具有很多,但我比较钟爱pycharm,也许喜欢DIY的程序猿推荐VS Code,Sublime Text.但我是个懒人,放着无脑且功能强大的pycharm,干嘛 ...
- 字 掉落 炫酷 网站_10大炫酷的HTML5文字动画特效欣赏
文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...
- 抖音上炫酷的网红文字时钟
看了鸿洋推荐的一位兄弟的这个时钟,感觉很帅,因为他是用kt写的,这里我把它改写成了java的,写了一下,也算跟着作者走一下流程与思路. 我这里直接上代码了,流程与思路请参看 原作者的文章 TextCl ...
- 用html制作表白网站制作 超炫酷的七夕情人节表白网页代码
❤ 精彩专栏推荐
- IDEA炫酷的主题字体颜色设置
IDEA中主题可以更换,大家可以直接到 链接:https://pan.baidu.com/s/1HmQcYUhiRkdNDlgO4EtBvw 提取码:481i 或者http://color-them ...
最新文章
- Linux字符设备驱动程序的框架(新写法)
- MySQL高效分页解决方案集
- MediaWiki使用指南
- 【python】-socketServer
- 电路板必须用c语言编程吗,上大学才知道绿油油的板子叫PCB,如何成为一名电子工程师...
- 全排列代码python_python全排列代码,求解释
- linux的sendmail服务有啥用,Linux的SendMail服务
- 2019.1.31及以前
- python--openpyxl模块使用, 对excel表格的操作
- sql语句查看MySQL数据库大小
- 如何用jQuery获得radio的值
- 计算机语言栏不能添加,电脑电脑输入法添加不了怎么办
- html验证码自动刷新,验证码输入错误后自动刷新验证码
- 压缩包文件打开密码如何破解
- 降低网站跳出率9种方法
- 用代码实现windows10下的虚拟桌面创建功能
- Flink1.12源码解读——Checkpoint详细执行过程
- 【MATLAB】使用“蒙特卡罗(Monter Carlo)”算法计算不规则图形的面积
- python写安卓游戏_10分钟学会python写游戏脚本!Python其实很简单
- 传说中的移动员工工资表,也不知是真是假