样式的unicode箭头未显示Google Fonts Web字体

Question

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

我使用Google字体在我的页面上包含该字体,该字体不会在其各自的页面上列出箭头.但是如果你从样本页面或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字体网站上将字体添加到我的软件包时,它允许我导入Latin版本或Latin Extended版本,切换到扩展版本似乎不会改变我的用例.

我已经尝试改变我将字体导入的@import方式<link>,我已经尝试改变我引用unicode字符的方式,←或者←似乎没有什么可以做的.

Answer 1

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

这是谷歌优化他们的API.该文件指出,有一个可选的subset,你可以通过获得比基本范围的详细参数.当您选中Latin extended复选框时,这与Google字体生成器添加到网址的属性相同.

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

由于text限制只是那些,我还没有找到一种方法让谷歌字体返回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>

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