哇去，有了這篇文章，項目中引入了再多的字體包，我都不怕了！！！

通常情況下，我們在開發一個新項目的時候，項目那邊通常都會提供一些項目所需的字體包，來滿足項目對字體展示的特殊需求。

這部分大家都比較熟悉，就不詳細講了，直接上代碼：

/* 引入字體包 */
@font-face {font-family: "SourceHanSansCN";src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}

<div class="font-container page-container"><p class="font-css font">測試字體abcde12345</p>
</div>

.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;&.font {font-family: 'SourceHanSansCN';}
}

?效果如下：

至此，即可簡單的引入自定義字體了。

然而，實際項目中，我們不可能只用一個字體字重吧，我們還需要考慮到在不同的模塊下使用不同的字體字重的情況，這也簡單，使用 【font-weight】，具體代碼如下：

<div class="font-container page-container"><p class="font-css light">測試字體abcde12345</p><p class="font-css regular">測試字體abcde12345</p><p class="font-css medium">測試字體abcde12345</p><p class="font-css bold">測試字體abcde12345</p>
</div>

.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-family: 'SourceHanSansCN';&.light {font-weight: 300;}&.regular {font-weight: 400;}&.medium {font-weight: 500;}&.bold {font-weight: 700;}
}

效果如下：

但是我們會發現

雖然我們設置了相對應的字重，但是并不是所有字體的字重都會生效。

這就不得不提我之前的發現了，由于不同瀏覽器對字體字重的兼容有所不同，比如500在ios系統那邊會生效但是window這邊不會生效；同時不同字體也不一定都包含兼容所有的字重，所以就會出現上面設置不同字重不生效的情況；而且實際項目過程中有時候簡單地設置字重不一定能滿足項目對字體字重的要求。

那怎么辦呢，既然簡單地設置字重不行，那么我們換個思路，引入不同字重的字體包試試。

說干就干：

/* 引入字體包 */
@font-face {font-family: "SourceHanSansCN-light";src: url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-light/SourceHanSansCN-light.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}/* 引入字體包 */
@font-face {font-family: "SourceHanSansCN-regular";src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-regular/SourceHanSansCN-regular.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}/* 引入字體包 */
@font-face {font-family: "SourceHanSansCN-medium";src: url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-medium/SourceHanSansCN-medium.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}/* 引入字體包 */
@font-face {font-family: "SourceHanSansCN-bold";src: url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.eot");/* IE9 */src: url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/SourceHanSansCN-bold/SourceHanSansCN-bold.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: normal;
}

<div class="font-container page-container"><p class="font-css light">測試字體abcde12345</p><p class="font-css regular">測試字體abcde12345</p><p class="font-css medium">測試字體abcde12345</p><p class="font-css bold">測試字體abcde12345</p>
</div>

.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;&.light {font-family: 'SourceHanSansCN-light';}&.regular {font-family: 'SourceHanSansCN-regular';}&.medium {font-family: 'SourceHanSansCN-medium';}&.bold {font-family: 'SourceHanSansCN-bold';}
}

效果如下：

簡單做個對比

通過對比，不難發現差距還是很明顯的，效果也是很明顯的啦！

然后，我們又會考慮到一個問題，因為我們現在修改字重是通過，將原來的【font-weight: 700】 改成【font-family: 'SourceHanSansCN-bold'】對應字體這種方式實現的。

那么，如果項目前期一直使用的是【font-weight】來設置字重，后期全部調整成【font-family】設置字體的話，需要修改的地方會很多很雜。

那有沒有什么方法，在保留原有字重的情況下實現呢，即通過設置字重來自動引入對應所需要的字重字體呢？答案肯定的，這也是接下來需要重點講解的內容。

首先引入所需的字體包

@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/light/light.eot");/* IE9 */src: url("./fonts/webFonts/test/light/light.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/light/light.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/light/light.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/light/light.svg#.PhoneFallback") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 300;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/regular/regular.eot");/* IE9 */src: url("./fonts/webFonts/test/regular/regular.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/regular/regular.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/regular/regular.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/regular/regular.svg#Source Han Sans CN") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 400;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/medium/medium.eot");/* IE9 */src: url("./fonts/webFonts/test/medium/medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/medium/medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/medium/medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/medium/medium.svg#qiantuxianmoti") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 500;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/bold/bold.eot");/* IE9 */src: url("./fonts/webFonts/test/bold/bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/bold/bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/bold/bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/bold/bold.svg#UnifrakturMaguntia") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 700;
}

這里我們看到引入的字體包的名稱是一致的，而不是像上一段那樣不同字體命名不同，但是字重不一樣了，需要特別關注的是

@font-face {font-family: "test-font";/* 通過字重實現自動引入對應字體 */font-weight: 700;
}

我們可以通過?@font-face?中的 font-weight 屬性來設置命中該字體包的字重大小，只要頁面設置的字重和該字體包重，即可命中并引入該字體包。
?/* 通過字重實現自動引入對應字體 */
?font-weight: 700;

<div class="font-container page-container"><p class="font-css light">測試字體abcde12345</p><p class="font-css regular">測試字體abcde12345</p><p class="font-css medium">測試字體abcde12345</p><p class="font-css bold">測試字體abcde12345</p>
</div>

.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-family: 'test-font';&.light {font-weight: 300;}&.regular {font-weight: 400;}&.medium {font-weight: 500;}&.bold {font-weight: 700;}
}

效果如下:

我們再來看一下字體引入情況

OK，的確只引入了700情況下的自定義字體包，效果Perfect！！！！！

好了，抬走下一個

通常情況下，我們字體會遇到中文，中文字符，英文，英文字符，數字等等情況，那我們怎么給不同的語言設置不同的字體呢。

那就有人會說了：“給不同語言設置不同字體不就好了，中文設置中文字體，英文設置英文字體。”

那么，問題來了，如果一個p標簽，span標簽里的內容，你無法識別，即既可能會是中文也可能是英文也可能是中英文混合，哪怎么辦呢？

又有人會說了：“那我們就不做區分，直接給這塊內容同時設置中英字體不就好了，哪個生效用哪個。”

的確，之前我也是這么想的，也是這么做的。然后又遇到問題了，如果項目提供的字體（不論中文字體還會英文字體）對中英文都生效怎么辦，這時候又達不到項目想要的效果了。

通過搜索查找，終于找到了解決辦法，使用【unicode-range】設置字符 unicode 范圍，從而自定義字體包。

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

它的語法如下：

@font-face {font-family: "test-font-cn";src: url("./fonts/webFonts/test/medium/medium.ttf") format("truetype");unicode-range: U+4E00-9FFF, U+3000-303F, U+2000-206F;
}

然后我的想法是對中文以及中文字符進行字符限制從而達到效果。

通過 chatgpt 我得知到中文、中符號的 unicode 的范圍為：?U+4E00-9FFF, U+3000-303F, U+2000-206F?這么幾個區間。

詳細代碼如下：

@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/medium/medium.eot");/* IE9 */src: url("./fonts/webFonts/test/medium/medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/medium/medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/medium/medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/medium/medium.svg#qiantuxianmoti") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 300;
}@font-face {font-family: "test-font";src: url("./fonts/webFonts/test/bold/bold.eot");/* IE9 */src: url("./fonts/webFonts/test/bold/bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/bold/bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/bold/bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/bold/bold.svg#UnifrakturMaguntia") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 700;
}/* 中文字體包 */
@font-face {font-family: "test-font-cn";src: url("./fonts/webFonts/test/medium/medium.eot");/* IE9 */src: url("./fonts/webFonts/test/medium/medium.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/medium/medium.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/medium/medium.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/medium/medium.svg#qiantuxianmoti") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 300;unicode-range: U+4E00-9FFF, U+3000-303F, U+2000-206F;/* 中文范圍 */
}/* 英文字體包 */
@font-face {font-family: "test-font-en";src: url("./fonts/webFonts/test/bold/bold.eot");/* IE9 */src: url("./fonts/webFonts/test/bold/bold.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */url("./fonts/webFonts/test/bold/bold.woff") format("woff"),/* chrome, firefox */url("./fonts/webFonts/test/bold/bold.ttf") format("truetype"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("./fonts/webFonts/test/bold/bold.svg#UnifrakturMaguntia") format("svg");/* iOS 4.1- */font-style: normal;font-weight: 700;
}

<div class="font-container page-container"><p class="font-css cn">測試字體abcde12345</p><p class="font-css en">測試字體abcde12345</p><p class="font-css cnen">測試字體abcde12345</p>
</div>

.font-css {font-size: 60px;color: black;margin: 20px auto;display: flex;align-items: center;justify-content: center;font-family: 'test-font';&.cn {font-weight: 500;}&.en {font-weight: 700;}&.cnen {font-family: 'test-font-cn', 'test-font-en';}
}

效果如下：

到此，我項目中遇到關于字體包的問題解決了.

BINGO！！！

總結：

1、項目引入自定義字體包? 【解決】

2、不同模塊設置不同自重【解決】

? ? ? ? 2-1 通過font-weight簡單設置

? ? ? ? 2-2 引入不同自重字體包并使用

? ? ? ? 2-3 通過設置font-weight按需自動引入不同自重字體包

3、不同言語字符設置不同字體包【解決】

? ? ? ? 3-1 通過設置unicode-range按需自動引入不同語言字體包

參看資料：

什么！一個項目給了8個字體包？？？https://juejin.cn/post/7251884086536781880CSS unicode-range特定字符使用font-face自定義字體https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/