使用Google Fonts网页字体时，样式化的Unicode箭头未显示出来。

Question

我正在尝试在网页上使用Source Code Pro字体，同时还想显示出其样例页面中漂亮的箭头。我使用Google Fonts在我的网页中引用该字体，但在Google Fonts的相应页面中没有列出这些箭头。但是，如果你从样例页面或htmlarrows.com中复制/粘贴一些箭头，它们会以我期望的方式显示出来。

当我按照Google Fonts告诉我在我的网页上使用该字体时，所有其他文本都变成了Source Code Pro，但箭头却回到了系统默认字体（对我而言是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 Fonts网站上将字体添加到我的捆绑包中时，它允许我导入拉丁版或拉丁扩展版，切换到扩展版似乎对我的使用情况没有任何影响。

我尝试了更改如何导入字体，从@import到，尝试更改如何引用Unicode字符为←或←，但似乎没有什么效果。

- Kasra Rahjerdi

Answer 1

如果您加载正在导入字体的URL：https://fonts.googleapis.com/css?family=Source+Code+Pro，您会发现被定义的@font-face中有设置unicode-range。但是该范围不包括箭头所在的U+02190-U+02199。

这是谷歌优化其API。 文档指出，您可以通过传递可选的subset参数来获取更多的基本范围。这与当您勾选“拉丁扩展”复选框时，Google字体生成器添加到URL的相同属性相同。

我无法找到任何定义的subset返回箭头的Unicode范围。但是，文档中还列出了另一个可选参数text。 text仅返回一个可以处理特定字符的@font-face。

由于text限制为仅这些字形，我无法找到一种方法让Google字体返回基本的Latin字符和箭头。如果它已经存在，这似乎是Google Fonts API中缺少的东西，或者如果存在，则记录不好。

作为解决方法，您可以在imports中重复添加第二个URL，仅针对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嵌入网页字体运行良好。

- Kasra Rahjerdi