Source Han Serif|2110x1110
前言
在上一篇文章里,我曾提到了将正文字体更换为开源免费的思源宋体这一做法,本文就将介绍通过
可以点击这里查看效果
为避免争议,除特别说明外,此文中的思源字体仅指思源黑体与思源宋体
Typekit
注册
已有账号请忽略此步骤
- 打开
Typekit 官网,点击右上角的「Sign in」打开登录页 - 点击「Get an Adobe ID」进入注册页
- 按要求输入姓名、邮箱、密码、国别和生日等信息
由于Typekit 服务并未进入中国大陆市场,此处国别区域一定不要选 China,否则会在登录时出现 Access Denied 的问题,我选择了 Hongkong - 点击「Sign up」按钮,Adobe
会发送一封邮件用来验证邮箱,点击邮箱链接完成验证
登录
在登录页输入帐号密码登录即可,若出现
挑选字体
- 搜索
source-han-serif-simplified-chinese 找到思源宋体简体版本的 Typekit 页面,注意不要选错为 source-han-serif,后者为仅包含西文字体的版本 - 点击「ADD TO KIT」按钮
- 点击「CREATE A KIT」按钮以创建一个新的
KIT(free plan 仅能创建一个 kit) - 页面会提示输入
KIT 名称和域名白名单,可用通配符 - 随后页面会打开一个小窗口,所有的配置都将在小窗口内完成
配置 KIT
KIT 配置|0x0
如图所示,左侧为所选字体的配置项,中间为此
点击左上角的「Using fonts in CSS」可以看到详细的
默认设置几乎不需进行任何改动,可能需要改动的是「Weights & Styles」区域,即字重配置。除非特殊情况,建议保持默认防止字体加载速度过慢
点击右上角的「Kit Settings」可以更改
点击右上角的「Embed Code」可以查看在页面内引入
Default
Advanced
鱼与熊掌不可得兼,加载慢但直接显示为替换后的字体或页面加载完成后替换,根据自己的需求选择即可
插入代码
将需要替换字体的元素的样式font-family
"source-han-serif-sc"
,这里是一个完整的示例:
p, li {
font-family: 'Source Han Serif SC','Source Han Serif','source-han-serif-sc','PT Serif','SongTi SC','MicroSoft Yahei',Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
}
在页脚区域插入上一步中获取到的代码,即可在网页内加载思源字体
一点历史
关于思源字体
思源字体是
西文部分为来自
思源字体名称中的「思源」一词来自于成语「饮水思源」,目前以
将此两个字体另起名为 Noto Sans CJK 与 Noto Serif CJK 发布,隶属 Noto 字体家族,但字形本身(包括西文、数字)与思源字体完全一样,仅字重称呼不同。
「Noto」一词意为不再有豆腐,这是由于计算机无法显示的字体,会出现空白的方格,这些方格又称为「豆腐」。
Noto字体的目的就是要消灭这些豆腐(意即尽可能地补上缺少的字符)
关于 Typekit
Typekit
结语
思源系列字体以其开源免费的协议和丰富的字重使无数的设计师趋之若鹜,而收录齐全这点绝对是一项大工程,这点不得不感谢
英文字体的
好在有
此外也有一些其他的方案,如「字蛛」等,通过分析本地