:让你的网站用上炫酷的中文字体-字体教程免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 字体教程
  3. 让你的网站用上炫酷的中文字体

让你的网站用上炫酷的中文字体

作者: 道格办公 • • 字体教程 • 浏览量 1002

客、设计网站、商业网站等等，都可以使用自定义字体来增加页面的视觉吸引力和独特性。以下是一些步骤，可以帮助你在网站中使用炫酷的中文字体。 1. 选择合适的字体：在使用自定义字体之前，你需要选择一款适合你网站风格的中文字体。确保该字体在不同浏览器和操作系统中都能正常显示，并且具备良好的可读性。 2. 下载字体文件：一旦你选定了中文字体，你需要下载它的字体文件。通常，字体文件拥有格式如.ttf、.otf、.woff等。 3. 将字体文件上传到服务器：将字体文件上传到你的网站服务器上的适当目录中，以便在网页

点击"阅读原文"可以获得更好的阅读体验。

前言

随着当前Web技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体。

例如，个人博客的首页字体：

CSS3引入的@font-face>

EOT字体是IE浏览器的首选格式，其他浏览器都不支持；其他浏览器更钟爱常见的TTF、SVG、WOFF。

基本语法如下：

@font-face>font-family:>src:>url('<下载好的字体，在电脑中保存的路径>');font-variant:>font-stretch:>font-style:>font-weight:>

例如：

@font-face>font-family:'Lora';src:>url('../fonts/STKaiti.eot');>/*IE9CompatModes*/src:>url('../fonts/STKaiti.eot?#iefix')>format('embedded-opentype'),>/*IE6-IE8*/>url('../fonts/STKaiti.woff2')>format('woff2'),>/*SuperModernBrowsers*/>url('../fonts/STKaiti.woff')>format('woff'),>/*ModernBrowsers*/>url('../fonts/STKaiti.ttf')>format('truetype'),>/*Safari,Android,iOS*/>url('../fonts/STKaiti.svg#STKaiti')>format('svg');>/*LegacyiOS*/font-style:>font-weight:>}body>font-family:>...}

测试效果：Chrome，Firefox，IE7-IE11均可以实现

01

字体难题

自定义中文字体虽炫酷，但有一个弊端，那就是中文字体太大了，很耗费资源，具体的原因其实很简单：英文只有26个字母，一张ASCII码表上128个字符集几乎可以表示任何英文语句。由于字符集小，字体文件也可以做的非常小；中文字体就完全不同，单单GB2313编码的中文字符（含符号）就达到7445个，字符数量是ASCII>

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文件：

$mkdirindex

然后在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:>font-style:>>>.test>font-family:'font';></style>
  • 请将<divclass="test"></div>中的文字换成你自己的网站的文字。你可以选择将你的博客所有文章内容全选，然后粘贴到此处。
  • 下载你想使用的字体到fonts文件夹，然后将index.html中的<font>换成你下载的字体的前缀。

特别说明：@font-face中的src>

下面是中文字体对应的英文名称：

新细明体：PMingLiU细明体：MingLiU标楷体：DFKai-SB黑体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微软正黑体：Microsoft>微软雅黑体：MicrosoftYaHei装Office会多出来的一些字体：隶书：LiSu幼圆：YouYuan华文细黑：STXihei华文楷体：STKaiti华文宋体：STSong华文中宋：STZhongsong华文仿宋：STFangsong方正舒体：FZShuTi方正姚体：FZYaoti华文彩云：STCaiyun华文琥珀：STHupo华文隶书：STLiti华文行楷：STXingkai华文新魏：STXinwei苹果电脑中的字体：华文细黑：STHeiti>华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong丽黑>丽宋Pro：LiSongProLight标楷体：BiauKai苹果丽中黑：Apple>苹果丽细宋：AppleLiSungLight

压缩本地WebFont

然后执行下面的命令来压缩本地WebFont：

$fsp>local>

哦对了，你需要先通过npm安装fsp命令：

$npmifont-spider-plus-g

压缩完成后，就会在fonts目录下生成压缩后的字体文件：

$llfonts/total>-rw-rw-rw-1cnsgygstaff7.7K112101:08STKaiti.eot-rw-rw-rw->-rw-rw-rw-1cnsgygstaff7.6K112101:08STKaiti.ttf-rw-rw-rw->-rw-rw-rw-1cnsgygstaff3.9K112101:08STKaiti.woff2

压缩之前的字体文件会被移到fonts目录下的.font-spider>

$llfonts/.font-spidertotal>-rw-rw-rw-1cnsgygstaff12M112101:08STKaiti.ttf

书写CSS

现在字体压缩完了，怎么应用到自己的网站中呢？也很简单，先写个CSS通过@font-faxe>

>/*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:>font-style:>>

这样还不行，你还需要将压缩后的字体文件拷贝你的网站中，CSS中通过相对路径要能找到这些字体文件。可我不想这么做，太麻烦了，我还想更简单点。

base64编码

灵机一动，想到了base64，编码之后可以不用拷贝这些字体文件，还能减少网站字体的加载体积，真是一箭双雕啊！具体的步骤我就不解释了，直接把所有步骤放到脚本中：

#!/bin/bashfont=STKaitieot=$(catfonts/>$font.eot|base64|tr-d'\n')woff=$(catfonts/>$font.woff|base64|tr-d'\n')woff2=$(catfonts/>$font.woff2|base64|tr-d'\n')ttf=$(catfonts/>$font.ttf|base64|tr-d'\n')svg=$(catfonts/>$font.svg|base64|tr-d'\n')cat>@font-face>font-family:'$font';src:url(data:application/font-eot;charset=utf-8;base64,>$eot)format('eot');font-weight:>font-style:>}@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:>font-style:>}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>font-family:>...}

可以再加上备用字体，例如：

body>font-family:>...}

表示如果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

● 别让自己“墙”了自己

● 彻底理解矩阵乘法

● 如何向纯洁的女朋友解释并发与并行的区别？

云原生是一种信仰 ?

扫码关注公众号

后台回复◉图谱◉领取史上最强Kubernetes知识图谱

点击 "阅读原文" 获取更好的阅读体验！

❤️给个「在看」，是对我最大的支持❤️

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Let%20your%20website%20use%20cool%20Chinese%20fonts.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu aaaa 专栏作者
48 196
single-end

相关推荐