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

Question

我正在尝试在网页上使用 Source Code Pro 字体，以及在其 specimen page 中可见的华丽箭头。 .

我使用 Google 字体将字体包含在我的页面上，它没有在 its respective page 上列出箭头.但是，如果您从样本页或 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 字体网站上将字体添加到我的包时，它允许我导入 Latin版本或 Latin Extended版本，切换到扩展版本似乎对我的用例没有任何改变。

我尝试更改从 @import 导入字体的方式至 <link> ，我尝试更改将 unicode 字符引用到 ← 的方式或 ← , 似乎没有什么能解决问题。

Answer 1

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

这是 Google 优化他们的 API。 documentation声明有一个可选的 subset 参数，您可以传递该参数以获得比基本范围更多的信息。这与您选中 Latin extended 复选框时 Google 字体生成器添加到 URL 的属性相同。

我找不到任何返回箭头 unicode 范围的已定义 subset。但是，文档中列出了另一个名为 text 的可选参数。 text 只返回一个@font-face 可以处理通过的特定字符。

由于 text 仅限于这些，我还没有找到让 Google Fonts 返回箭头旁边的基本 Latin 字符的方法。这似乎是 Google Fonts API 中缺少的东西，或者如果它已经存在则没有很好的记录。

作为一种变通方法，您可以将 imports 加倍并添加第二个仅用于 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>

或者，在我的特定用例中，相同的字体是通过 Adob​​e 的 Typekit 提供的。 .使用 Typekit 嵌入网络字体效果很好。