?? 遇到的問(wèn)題

在一個(gè)新項(xiàng)目中，設(shè)計(jì)統(tǒng)一了項(xiàng)目中所有的字體，并提供了字體包。在項(xiàng)目中需要按需引入這些字體包。

首先，字體包的使用分為了以下幾種情況：

無(wú)特殊要求的語(yǔ)言使用字體A，阿拉伯語(yǔ)言使用字體B；
加粗、中等、常規(guī)、偏細(xì)四種樣式，AB兩種字體分別對(duì)應(yīng)使用 Bold 、 Medium 、 Regular 、 Thin 四種字體包；

所以，我現(xiàn)在桌面上擺著 8 個(gè)字體包：

A-Bold.tff
A-Medium.tff
A-Regular.tff
A-Thin.tff
B-Bold.tff
B-Medium.tff
B-Regular.tff
B-Thin.tff

不同語(yǔ)言要使用不同的字體包，不同粗細(xì)也要使用不同的字體包！

還有一個(gè)前提是，設(shè)計(jì)給的設(shè)計(jì)圖都是以字體A為準(zhǔn)，所以在 Figma 中復(fù)制出來(lái)的 CSS 代碼中字體名稱(chēng)都是A。

剛接到這個(gè)需求時(shí)還是比較懵的，一時(shí)想不出來(lái)怎么樣才能以最少的邏輯判斷、最少的文件下載、最少的代碼改動(dòng)去實(shí)現(xiàn)在不同情況下自動(dòng)的去選擇對(duì)應(yīng)的字體包。

因?yàn)橐婕暗秸Z(yǔ)言的判斷，最先想到的還是通過(guò) JS，然后去添加相應(yīng)的類(lèi)名。但這樣也只能判斷語(yǔ)言使用A或B，粗細(xì)還是解決不了。

看來(lái)還是要用 CSS 解決。

首先我將所有的8個(gè)字體先定義好：

@font-face {
    font-family: A-Bold;
    src: url('./fonts/A-Bold.ttf');
}

/* ... */

@font-face {
    font-family: B-Thin;
    src: url('./fonts/B-Thin.ttf');
}

???? 如何根據(jù)粗細(xì)程度自動(dòng)選擇對(duì)應(yīng)字體包

有同學(xué)可能會(huì)問(wèn)，為什么不直接使用 font-weight 來(lái)控制粗細(xì)而是用不同的字體包呢？

我們來(lái)看下面這個(gè)例子，我們使用同一個(gè)字體， font-weight 分別設(shè)置為900、500、100，結(jié)果我們看到的字體粗細(xì)是一樣的。

對(duì)的，很多字體不支持 font-weight 所以我們需要用不同粗細(xì)的字體包。

所以，我們可以通過(guò) @font-face 中的 font-weight 屬性來(lái)設(shè)置字體的寬度：

@font-face {
    font-family: A;
    src: url('./fonts/A-Bold.ttf');
  font-weight: 600;
}
@font-face {
    font-family: A;
    src: url('./fonts/A-Medium.ttf');
  font-weight: 500;
}
@font-face {
    font-family: A;
    src: url('./fonts/A-Regular.ttf');
  font-weight: 400;
}
@font-face {
    font-family: A;
    src: url('./fonts/A-Thin.ttf');
  font-weight: 300;
}

注意，這里我們把字體名字都設(shè)為相同的，如下圖所示，這樣我們就成功的解決了第一個(gè)問(wèn)題：不同粗細(xì)也要使用不同的字體包；

并且，如果我們只是定義而未真正使用時(shí)，不會(huì)去下載未使用的字體包，再加上字體包的緩存策略，就可以最大程度節(jié)省帶寬：

?? 如何根據(jù)不同語(yǔ)言自動(dòng)選擇字體包？

通過(guò)張?chǎng)涡竦牟┛驼业搅私鉀Q辦法，使用 unicode-range 設(shè)置字符 unicode 范圍，從而自定義字體包。

unicode-range 是一個(gè) CSS 屬性，用于指定字體文件所支持的 Unicode 字符范圍，以便在顯示文本時(shí)選擇適合的字體。

它的語(yǔ)法如下：

@font-face {
  font-family: "Font Name";
  src: url("font.woff2") format("woff2");
  unicode-range: U+0020-007E, U+4E00-9FFF;
}

在上述例子中，unicode-range 屬性指定了字體文件支持的字符范圍。使用逗號(hào)分隔不同的范圍，并使用 U+XXXX-XXXX 的形式表示 Unicode 字符代碼的范圍。

通過(guò)設(shè)置 unicode-range 屬性，可以?xún)?yōu)化字體加載和頁(yè)面渲染性能，只加載所需的字符范圍，減少不必要的網(wǎng)絡(luò)請(qǐng)求和資源占用。

通過(guò)查表得知阿拉伯語(yǔ)的 unicode 的范圍為：U+06??, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10A60-10A7F, U+10A80-10A9F 這么幾個(gè)區(qū)間。所以我們?cè)O(shè)置字體如下，因?yàn)樵O(shè)計(jì)以 A 字體為準(zhǔn)，所以在 Figma 中給出的樣式代碼字體名均為 A，所以我們把 B 字體的字體名也設(shè)置為 A：

當(dāng)使用字體的字符中命中 unicode-rang 的范圍時(shí)，自動(dòng)下載相應(yīng)的字體包。

@font-face {
    font-family: A;
    src: url('./fonts/A-Bold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: A;
    src: url('./fonts/A-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: A;
    src: url('./fonts/A-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: A;
    src: url('./fonts/A-Thin.ttf');
    font-weight: 300;
}

:root {
    --ARABIC_UNICODE_RANGE: U+06??, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10A60-10A7F, U+10A80-10A9F;
}
@font-face {
    font-family: A;
    src: url('./fonts/B-Bold.ttf');
    font-weight: 600;
    unicode-range: var(--ARABIC_UNICODE_RANGE);
}
@font-face {
    font-family: A;
    src: url('./fonts/B-Medium.ttf');
    font-weight: 500;
    unicode-range: var(--ARABIC_UNICODE_RANGE);
}
@font-face {
    font-family: A;
    src: url('./fonts/B-Regular.ttf');
    font-weight: 400;
    unicode-range: var(--ARABIC_UNICODE_RANGE);
}
@font-face {
    font-family: A;
    src: url('./fonts/B-Thin.ttf');
    font-weight: 300;
    unicode-range: var(--ARABIC_UNICODE_RANGE);
}
p {
    font-family: A;
}