Question

我正在尝试在网页上使用字体源代码专业版，以及specimen page中可见的华丽箭头。

我使用Google字体在我的页面上包含字体，但不会列出its respective page上的箭头。但是如果你从样本页面复制/粘贴一些箭头，或htmlarrows.com它们看起来像我期望的那样。

当我使用Google Fonts告诉我在我的网页上使用该字体时，所有其他文本都变为Source Code Pro，但箭头默认返回系统默认字体（Arial for me）。

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

当我在Google字体网站上将字体添加到我的软件包时，它允许我导入Latin版本或Latin Extended版本，切换到扩展版本似乎不会为我的用例更改任何内容。

我已尝试更改将字体从@import导入<link>的方式，我尝试更改我将unicode字符引用到←或{{的方式1}}，似乎没有什么可以做到的。

Answer 1

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

这是Google优化他们的API。 documentation表示您可以传递一个可选的unicode-range参数，以获得超过基本范围的参数。当您选中subset复选框时，这与Google字体生成器添加到网址的属性相同。

我无法找到任何定义的Latin extended，它会返回箭头的unicode范围。但是，文档中列出了另一个可选参数subset。 text仅返回可以处理通过的特定字符的text。

由于@font-face仅限于那些，我还没有找到让Google字体沿箭头返回基本text个字符的方法。这似乎是Google Fonts API中缺少的内容，或者如果已存在则没有详细记录。

作为解决方法，您可以加倍Latin并为imports添加第二个（但首先对字符进行编码）。请注意，这并不是很好，因为它只为两个字形添加了另一个完整的往返。

一个例子：

＆＃13;

text=←|→

＆＃13;

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

＆＃13;

或者，在我的特定用例中，通过Adobe Typekit提供相同的字体。使用Typekit嵌入Web字体可以正常工作。

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

1 个答案: