5

我按照google/roboto 存储库上的说明进行操作，但没有 OTF 文件可以用作 webfont。

我能得到的唯一反馈是 Chrome 说Failed to decodeded font。

OTS说一切都很好。

为什么会这样？如何在网络上使用 Roboto opentype 功能？

仅供参考，我还打开了google/roboto#283

这是生成的字体之一：https ://drive.google.com/open?id=157_-UBTyswylqY3DOK-mKihd7Vk-vFA_

4

3 回答 3

3

更新（基于更新的问题）

显然，生成的 OTF 字体没有为 web 正确编码——所有浏览器都有不同的字体渲染引擎，并且在 Chrome 和 Firefox 中解码此文件失败，甚至 Font Squirrel 报告字体已损坏，无法转换。有趣的是，在 Safari 中工作得很好。

如果您想使用 Roboto 字体功能，您必须生成自己的网络字体。我创建了一个演示页面，演示了 Roboto 的一些字体功能，各种网络字体（woff2、woff、otf、ttf）经过以下步骤：

make使用 google/roboto 存储库运行后，您应该在RobotoTTF目录中获得 TTF 字体。这些文件包括 Roboto 的所有字体功能，您可以使用它们来生成您的网络字体文件。如果你希望你甚至可以使用 TTF 字体：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto-Regular.ttf') format('truetype');
}

尽管您的文件会很大，并且您绝对应该将它们转换为其他网络字体格式（woff2产生最佳效果并且在所有现代浏览器中都受支持）以显着减小文件大小，因此您的@font-face声明将是：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto-Regular.woff2') format('woff2');
}

您仍然可以在生成的网络字体中包含和使用字体功能，并在您的 CSS 代码中使用它们：

.yourclass {
  font-feature-settings: ...;
}

您可以在线和在计算机上使用许多工具。我尝试了以下方法，它们可以很好地将 OpenType 功能保留在生成的 Web 字体中：

附带说明一下，您可能会发现LCDF Typetools很有用，特别是otfinfo用于otfinfo -f Roboto-Regular.ttf列出字体支持的所有功能。

以下是 Roboto 字体的功能列表：

  • c2sc - 来自首都的小资本
  • ccmp - 字形组合/分解
  • cpsp - 大写间距
  • dlig - 自由连字
  • dnom - 分母
  • frac - 分数
  • kern - 字距
  • liga - 标准连字
  • lnum - 衬里数字
  • mark - 标记定位
  • mkmk - 标记到标记定位
  • numr - 分子
  • onum - 老式数字
  • pnum - 比例数字
  • 盐 - 风格替代品
  • smcp - 小资本
  • ss01 — 风格集 1
  • ss02 — 风格集 2
  • ss03 — 风格集 3
  • ss04 — 风格集 4
  • ss05 — 风格集 5
  • ss06 — 风格集 6
  • ss07 — 风格集 7
  • tnum - 表格数字
  • unic - 单字

我希望你会发现这很有帮助。

**因与更新的问题无关而删除

于 2018-01-07T04:33:45.760 回答
1

从 Roboto repo 构建字体确实会产生无效字体。正如您建立的那样，Chrome（和 Firefox）拒绝它。Fontforge 的fontlint在检查 Roboto 的这个 OTF 时会产生很多错误。在许多关于不匹配的提前宽度中，它的结论是：

ERROR      2 Self-intersecting glyph
ERROR      3 Wrong direction
ERROR      5 Missing points at extrema
FAIL         Roboto-Regular.otf

这些错误似乎只指向损坏的字形，但这不应该让 Chrome 完全拒绝该字体。

为了好玩，我潜入看看到底是什么破坏了字体。经过一番调查，我在 CFF 表中发现了两个条目，这些条目显然是无效字体：

<FamilyBlues value="0"/>
<FamilyOtherBlues value="0"/>

删除这些将修复字体。（我会将此添加到您报告的问题中）

关于使用 OpenType 功能：很多布局功能可以通过 CSS 启用，当然如果它们在字体中的话。您可以自己编写 CSS（例如font-feature-settings: "liga";启用连字），或使用方便的跨浏览器 CSS 库，如Utility OpenType。

于 2018-01-09T11:16:28.957 回答
0

不要在网络上使用otf、ttf、svg或eot字体。前两种是通用 OpenType 字体，其数据量远远超过在 Web 上工作所需的数据，包括规范合法的数据，但会被 OTS 等过度保护的解析器拒绝，后两种格式多年来一直是死格式，永远不应该使用。

将原始源代码（otf 或 ttf，除非您知道它为什么重要，否则选择哪个无关紧要，这意味着您非常熟悉 OpenType 的内部结构））作为 WOFF 或 WOFF2 字体与类似 google 的字体woff2 实用程序或TTX，然后只使用它，并且仅使用它：

@font-face {
  font-family: Roboto;
  src: url(./assets/myfonts/roboto.woff2) format("woff2");      
}

事情应该可以正常工作。

于 2018-01-07T15:56:51.587 回答