站點資源字體與在線字體
使用網頁字體製作工具，將 .ttf 字體轉換爲 .woff2，將生成的網頁字體放入相應路徑文件夾中，在網頁的 CSS 文檔中定義字體名稱、路徑並引用即可。對中文而言，因字體加載較多，此方法不僅消耗服務器流量較大，而且有時會導致頁面加載速度緩慢。
所以，在有服務器流量約束的時候，優先使用可用的網頁在線字體，雖然這種辦法也未能盡如人意。
默認無襯線系列字體
自己偏愛舊字形，怎樣在不指定自製的 .woff2 字體的同時又能使網頁漢字字體使用或接近舊字形風格呢？截至到 2023 年 11 月的辦法是使用 Google Fonts 網頁字體。具體的方案是：
網頁的 CSS 文檔可以添加如下，Google Fonts 鏈接可以參考一些方案更改爲境內可用的替換鏈接：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
@font-face {
font-family: 'Noto Sans'; //regular 字重 400
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-regular.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-regular.woff') format('woff');
}
@font-face {
font-family: 'Noto Sans'; //設置默認的斜體樣式（字重可改）
font-style: italic;
font-weight: normal;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-600italic.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-600italic.woff') format('woff2');
}
@font-face {
font-family: 'Noto Sans'; //bold 700（字重可以改爲600或更粗的800）
font-style: normal;
font-weight: bold;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-700.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-700.woff') format('woff');
}
@font-face {
font-family: 'Noto Sans'; //設置默認的粗斜體樣式（字重可改）
font-style: italic;
font-weight: bold;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-700italic.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-700italic.woff') format('woff2');
}
//Noto Sans KR HK SC : fonts.loli.net 和 fonts.geekzu.org 加载思源黑体均能在国内达到与 Google Fonts 相近的速度
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;700&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@import url('https://fonts.loli.net/css2?family=Noto+Sans+HK:wght@400;700&display=swap');
@import url('https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
@import url('https://fonts.loli.net/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
|
然後在樣式文檔設置 body p 的字體樣式爲 font-family: 'Noto Sans', 'chdot', 'Noto Sans KR', 'Noto Sans HK', 'Noto Sans SC', sans-serif; 則頁面正文字體則如本頁所示效果：bold 粗體，italic 斜體，bolditalic 粗斜體.
字體樣式中的 chdot 是爲了替換「思源黑體韓國」中的置底的頓號、逗號、句號，以統一標點顯示風格，使得漢字標點全部置中。絞盡腦汁找到此方法，使用 font-spider-plus 提取思源黑體香港版字體中的頓號、逗號、句號，生成專門的 CSS 文檔引用，在加載思源漢字前加載這三個標點。這個工具在處理網頁漢字字體方面還有一些奇妙的用處，不過似乎不必將頁面字體折騰得過於繁瑣。
襯線系列字體
簡體中文頁面字體
The article was recently updated on Friday, October 27, 2023, 12:07:17 by 👩 高松年.
