样式化的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字体效果很好。