之前建站的时候，就发现了很多站点使用此字体，很是喜欢。昨日逛林老师
的站点时，发现他也使用了霞鹜文楷，闲来无事，便把自己的站点也折腾了下。[现更换鸿蒙字体和得意黑字体]
字体简介# 霞鹜文楷 / LXGW WenKai是一款基于FONTWORKS的Klee One的开源中文字体，免费、可商用，兼仿宋和楷体特点，可读性高。包含《通用规范汉字表》汉字8105个，并补全其对应的繁体字或港台异体字。还增补了部分常用粤、闽、客字，注音符号。简繁日汉字共计2万余字。获取字体请前往此项目地址
。
字体预览# 食用方式# 直接调用CDN 1
< link rel = "stylesheet" href = "https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css" media = "print" onload = "this.media='all'" >
或
1
< link rel = "stylesheet" href = "https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media = "print" onload = "this.media='all'" >
CSS中写入 1
2
3
4
body {
/* Screen version */
font-family : "LXGW WenKai Screen" , sans-serif ;
}
另：鸿蒙字体及其他字体# 鸿蒙字体 #
1
2
3
<!-- 白嫖b站 -->
< link rel = "stylesheet" href = "//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" media = "all" onload = "this.media='all'" />
< link rel = "stylesheet" href = "//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css" media = "all" onload = "this.media='all'" />
或
1
2
< link rel = "stylesheet" href = "https://npm.elemecdn.com/gahotx-cdn@1.0.14/fonts/harmony/regular.min.css" media = "all" onload = "this.media='all'" />
< link rel = "stylesheet" href = "https://npm.elemecdn.com/gahotx-cdn@1.0.14/fonts/harmony/medium.min.css" media = "all" onload = "this.media='all'" />
华康金刚黑 - 字节跳动 # 华康金刚黑
1
2
400 字重 CSS：//fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular& display=swap
500 字重 CSS：//fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium& display=swap
思源黑体 - 谷歌字体库 # 思源黑体
1
2
3
可变字重 CSS：//fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700& display=swap
该 CSS 可以通过链接控制字重，比如我只想要 400 字重，那么在链接@400;500;700 部分修改为@400，增加同理。
小米字体 - 小米 MIUI 官网 # 小米字体
1
2
3
可变字重 CSS：//font.sec.miui.com/font/css?family=MiSans:400,500,700:Chinese_Simplify,Latin& display=swap
该 CSS 可以通过链接控制字重，比如我只想要 400 字重，那么在链接 MiSans:400,500,700 部分修改为 MiSans:400，增加同理。
OPPO 字体 - OPPO 网站 # OPPO 字体
1
2
3
4
5
6
7
8
9
400 字重 WOFF2：
链接① //www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
链接② //code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
500 字重 WOFF2：
链接① //www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
链接② //code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
该部分为 woff2 字体文件与上述 css 引入方式不同，具体看下述说明。
阿里巴巴普惠体 - 阿里巴巴网站 # 阿里巴巴普惠体
1
该部分查看 https://fonts.alibabagroup.com/#/font
引入方式# CSS文件 1
2
3
4
5
6
7
方式一、在 html 中直接引入：
< link rel = 'stylesheet' href = '.css' >
--------
方式二、在 css 中引入：
@import url('.css');
woff 文件 1
2
3
4
5
6
7
在 css 中引入
@font-face {
font-family: OPPOSans; //定义字体名称
font-weight: 400; //定义字重
font-display: swap;
src:url('.woff2') format('woff2'); //字体链接
}
上述字体列表链接中，若是 css 链接可直接引用，若是 woff 字体链接需在你的 css 文件中引入。
字重说明# 浏览器默认字重 400，假如对标题想要使用粗体该如何操作呢？在设定字体字重时会有两种不同的呈现效果方式。
情况一、对不同字重文件使用相同字体名称引入 1
2
3
4
5
6
7
8
9
10
11
12
13
例如下述两个不同字重文件都使用 OPPO-Sans 名称：
@font-face {
font-family: OPPO-Sans;
font-weight: 400;
font-display: swap;
src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
font-family: OPPO-Sans;
font-weight: 500;
font-display: swap;
src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}
那么在对 h1 这个部分引用时，如何使用字重 500 的字体呢？只需要设定 font-weight 属性为 500 即可。即下述：
1
2
3
4
5
6
7
8
9
10
11
普通元素在引入 400 字重时
div {
font-weight: 400;
}
-----
标题元素在引入 500 字重时
h1 {
font-weight: 500;
}
情况二、对不同字重文件使用不同字体名称引入 1
2
3
4
5
6
7
8
9
10
11
12
13
例如下述两个不同字重文件使用不同字体名称：
@font-face {
font-family: OPPO-Sans-Regular;
font-weight: 400;
font-display: swap;
src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
font-family: OPPO-Sans-Medium;
font-weight: 500;
font-display: swap;
src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}
那么在引用时，只能使用当初设定该字重的字体名称。即下述：
1
2
3
4
5
6
7
8
9
10
11
普通元素在引入 400 字重时
div {
font-family: OPPO-Sans-Regular;
}
-----
标题元素在引入 500 字重时
h1 {
font-family: OPPO-Sans-Medium;
}
你会发现，无论是否使用相同名称，font-weight 的值都必须要与实际的字体字重文件匹配。
font-display swap 说明# 你会发现很多引入字体的文件都会标注这个属性，它的作用是在没有加载出字体前，优先加载本地字体进行渲染，避免网页出现空屏。若您想了解关于该部分的研究资料及加载字体所带来的影响，推荐您查看该文章《知乎：一种减少字体加载影响的新方法：CSS 字体描述符(译)》
unicode-range 优化说明# 当你引入官方的 css 字体链接后，有些文件里的一个 unicode-range 属性引起了你的注意，这个属性的作用是规定不同的字符加载不同字符集文件。通俗讲我们会把一个字体分成多个字符集，然后按需加载。例如一个页面只有 500 个字，但是这 500 个字恰好都在一个字符集里面，那么其他的字符集就不需要加载，换句话说就不需要加载整个字体文件，因此节省了流量和优化了加载速度。
字体文件格式# 本文一律使用 woff2 字体格式，在如今浏览器趋于 Chromium 内核的潮流下，作为个人站点可以不需要考虑旧版本浏览器的兼容性。若您想了解其他字体格式，推荐您查看《知乎：关于字体格式》
就 windows 上的清晰效果而言，无论你使用何种字体，都没有在 windows 经过特殊优化的微软雅黑更好。如今当你在 windows 安装苹方字体后，你会发现苹方字体的显示效果也十分漂亮，这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在 Windows 经过特殊优化的字体，也会在 Windows 上大放异彩。
