樣式化的Unicode箭頭顯示不與谷歌網頁字體的字體

Question

我想使用的字體源代碼臨在網頁上，沿着在其specimen page可見華麗的箭頭。

我包括使用谷歌的字體，它沒有列出對its respective page的箭頭我的網頁上的字體。但是，如果您從樣本頁面或htmlarrows.com中複製/粘貼一些箭頭，它們會以我期望的方式呈現。

當我使用的字體作爲谷歌的字體告訴我用它在我的網頁，所有的其他文字變得源代碼臨但箭頭回到默認的系統默認字體（宋體對我來說）。

下面是一個例子：

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); 
 

 
.container { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    font-size: 96px; 
 
} 
 

 
td, th { 
 
    border: 0.1rem solid #c3c3c3; 
 
    padding: 0.5rem; 
 
} 
 

 
.row-sans-serif { 
 
    font-family: sans-serif; 
 
} 
 

 
.row-source-code-pro { 
 
    font-family: 'Source Code Pro', sans-serif; 
 
}

<table class="container"> 
 
    <thead> 
 
    <tr> 
 
     <th>font-family</th> 
 
     <th>A</th> 
 
     <th>Left</th> 
 
     <th>Right</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row-sans-serif"> 
 
     <th>sans-serif</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    <tr class="row-source-code-pro"> 
 
     <th>Source Code Pro</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

當我的字體添加到我的谷歌字體網站捆綁它可以讓我導入Latin版本或Latin Extended版本，切換到擴展版本似乎並沒有改變我的用例。

我試圖改變我如何導入字體從@import到<link>，我試圖改變我如何引用Unicode字符到←或←，似乎沒有這樣的伎倆。

Answer 1

如果您加載正在導入字體的網址：https://fonts.googleapis.com/css?family=Source+Code+Pro，您會看到@font-face被定義爲unicode-range。該範圍不包括U + 02190-U + 02199，這是箭頭所在的位置。

這是谷歌優化他們的API。 documentation指出有一個可選的subset參數可以傳遞以獲得比基本範圍更多的參數。當您檢查Latin extended複選框時，這是Google Fonts生成器添加到URL的相同屬性。

我無法找到任何定義subset用於返回箭頭unicode的範圍。但是，文檔中還有另一個可選參數text。 text只返回一個可以處理通過的特定字符的@font-face。

由於text僅限於這些，我還沒有找到一種方法讓谷歌字體返回箭頭旁邊的基本Latin字符。這似乎是谷歌字體API中缺乏的東西，或者如果它已經存在，就沒有很好的記錄。

作爲解決方法，您可以在imports上加倍，併爲text=←|→添加第二個（但首先會對字符進行編碼）。請注意，這不是很好，因爲它爲兩個字形添加了另一個整個往返行程。

一個例子：

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); 
 
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&text=%E2%86%90|%E2%86%92'); 
 

 
.container { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    font-size: 96px; 
 
} 
 

 
td, th { 
 
    border: 0.1rem solid #c3c3c3; 
 
    padding: 0.5rem; 
 
} 
 

 
.row-sans-serif { 
 
    font-family: sans-serif; 
 
} 
 

 
.row-source-code-pro { 
 
    font-family: 'Source Code Pro', monospace; 
 
}

<table class="container"> 
 
    <thead> 
 
    <tr> 
 
     <th>font-family</th> 
 
     <th>A</th> 
 
     <th>Left</th> 
 
     <th>Right</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row-sans"> 
 
     <th>sans-serif</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    <tr class="row-source-code-pro"> 
 
     <th>Source Code Pro</th> 
 
     <td>A</td> 
 
     <td>&#8592;</td> 
 
     <td>&#8594;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

另外，在我的具體使用情況下，相同的字體是通過Adobe的Typekit提供。使用Typekit嵌入Web字體效果很好。