css – 未显示Google Fonts网络字体的样式化unicode箭头

我试图在网页上使用字体源代码专业版,以及其 specimen page中可见的华丽箭头.

我在我的页面上包含了使用谷歌字体的字体,它没有列出its respective page的箭头.但是如果你从样本页面或htmlarrows.com中复制/粘贴一些箭头,它们看起来就像我期望的那样.

当我使用字体作为谷歌字体告诉我在我的网页上使用它时,所有其他文本变为源代码专业版,但箭头默认回到系统默认字体(Arial对我来说).

这是一个例子：

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

当我在Google字体网站上将字体添加到我的包中时,它允许我导入拉丁语版本或拉丁语扩展版本,切换到扩展版本似乎不会改变我的用例.

我已经尝试改变如何将字体从@import导入到< link>,我尝试改变我将unicode字符引用到& larr的方式;或&#x2190;似乎没有什么可以做到的.

如果加载为字体导入的URL： https://fonts.googleapis.com/css?family=Source+Code+Pro,您将看到正在定义的@ font-faces设置了unicode-range.该范围不包括U 02190-U 02199,这是箭头所在的位置.

这是谷歌优化他们的API. documentation声明有一个可选的子集参数,您可以传递以获得超过基本范围.当您检查拉丁语扩展复选框时,这与Google字体生成器添加到URL的属性相同.

我找不到任何返回箭头的unicode范围的已定义子集.但是,文档中列出了另一个可选参数,名为text. text只返回一个@ font-face,它可以处理传递的特定字符.

由于文本仅限于那些,我还没有找到让谷歌字体沿箭头返回基本拉丁字符的方法.这似乎是Google Fonts API中缺少的内容,或者如果它已经存在则没有详细记录.

作为解决方法,您可以将导入加倍,并为text =←|→添加第二个(但首先对url进行编码).请注意,这并不是很好,因为它只为两个字形添加了另一个完整的往返.

一个例子：

@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字体工作正常.