雖然我已經在我的Windows機器上安裝了解放Sans字體,但谷歌Chrome在渲染下面代碼片段中的第一行時并不使用它。顯然,這是因為字體系列規則使用了后綴名稱LiberationSans(不帶空格)。當我添加空格時(至于第二行),它工作了:
在字體系列規則中,我必須總是在本地字體名稱中包含空格嗎?我這樣問是因為這個樣式表使用不帶空格的PostScript名稱是為了解決wkhtmltopdf中的一個缺陷。
.psname {
font-family: LiberationSans, Arial;
}
.name {
font-family: "Liberation Sans", Arial;
}
<p class="psname">Jove, look at this font!</p>
<p class="name">Jove, look at this font!</p>
如果你想引用本地字體系列,你必須完全按照字體系列在任何給定操作系統上的拼寫來寫。實際上,如果您需要支持傳統名稱,您需要以兩種方式拼寫字體系列。如果同一種字體在某些系統上有不同的拼寫,列出更多的名字。例如:
font-family: "Liberation Sans", "LiberationSans", "Arial", sans-serif;
注意,我還添加了關鍵字sans-serif作為備用,以防操作系統沒有列出的任何本地字體系列。您應該對所有字符串使用引號,對關鍵字不使用引號。由于歷史原因,大多數瀏覽器都支持在名字中省略引號,但是你不應該相信這個。官方的語法只是字符串或者預定義的關鍵字。
至于wkhtmltopdf,根據我的經驗,它有太多的錯誤,你可能不想使用它。如果您可以安裝所需的依賴項,我會推薦使用電子pdf(基本上是npm和最近的Node.js,如果您想運行電子pdf headless,可能還有xvfb-run)。
是的,當你在CSS中使用font-family屬性時,你需要在字體名稱中包含空格。這是因為您為字體系列提供的字符串應該與字體在操作系統中注冊的方式完全匹配。
在這種情況下,字體& quot解放桑斯& quot名稱中有一個空格,所以您需要使用& quot解放桑斯& quot,而不是& quot解放運動黨& quot。
瀏覽器將您在CSS中指定的字體系列與系統上安裝的字體相匹配。如果它找不到完全匹配的字體,它將移動到你的字體堆棧中的下一個字體。在您的情況下,當您指定& quot解放運動黨& quot而瀏覽器沒有找到,就會用& quotArial & quot。
關于wkhtmltopdf,它似乎有一個處理帶有空格的字體名稱的錯誤。作為一種解決方法,您可能需要以不同的名稱注冊字體的另一個副本,沒有空格,這樣它就可以被Chrome和wkhtmltopdf使用。但是,請注意,這可能不是標準或推薦的解決方案。
請務必在包含空格的字體名稱兩邊加上引號,這樣可以確保瀏覽器將其正確地解釋為單個字體名稱:
font-family: "Liberation Sans", Arial;