遇到的問(wèn)題

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

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

1. 無(wú)特殊要求的語(yǔ)言使用字體A，阿拉伯語(yǔ)言使用字體B；
2. 加粗、中等、常規(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ì)的字體包。

@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;
}

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

@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;
}

總結(jié)

遇到的問(wèn)題：

1. 兩種字體，B 字體為阿拉伯語(yǔ)使用，A 字體其他語(yǔ)言使用。根據(jù)語(yǔ)言自動(dòng)選擇。
2. 根據(jù)字寬自動(dòng)選擇相應(yīng)的字體包。
3. 可以直接使用 Figma 中生成的樣式而不必每次手動(dòng)改動(dòng)。
4. 盡可能節(jié)省帶寬。

我們通過(guò) font-weight 解決了問(wèn)題2，并通過(guò) unicode-range 解決了問(wèn)題1。

并且實(shí)現(xiàn)了按需下載相應(yīng)字體包，不使用時(shí)不下載。

Figma 中的代碼可以直接復(fù)制粘貼，無(wú)需任何修改即可根據(jù)語(yǔ)言和自寬自動(dòng)使用相應(yīng)字體包。