无法解码 OpenType Roboto
Failed to decode OpenType Roboto
我关注了instructions on the google/roboto repository，但是没有OTF文件可以用作webfont。
我能得到的唯一反馈是 Chrome 说 无法解码下载的字体。
OTS 表示一切正常。
为什么会这样？如何在 Web 上使用 Roboto opentype 功能？
仅供参考我也打开了google/roboto#283
这是生成的字体之一：https://drive.google.com/open?id=157_-UBTyswylqY3DOK-mKihd7Vk-vFA_
更新（基于更新的问题）
显然，生成的 OTF 字体没有针对网络进行正确编码 — 所有浏览器都有不同的字体渲染引擎，并且此文件的解码在 Chrome 和 Firefox 中失败，甚至 Font Squirrel 报告 字体损坏，无法转换。有趣的是，在 Safari 中工作得很好。
如果您想使用 Roboto 字体功能，您必须生成自己的网络字体。 I have created a demo page that demonstrates some of Roboto's font features，各种网页字体（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 产生最好的结果并且它是 supported in all modern browsers）以显着减小文件大小，所以您的 @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 功能保留在生成的网络字体中效果很好：
- The already mentioned onlinefontconverter — 您可以选择生成各种字体和网页字体格式
- Font Squirrel Webfont generator — 确保你 select Expert 选项，并在 OpenType Features select 保留所有功能
在旁注中，您可能会发现 LCDF Typetools useful, specifically otfinfo 用作 otfinfo -f Roboto-Regular.ttf 来列出字体支持的所有功能。
以下是 Roboto 字体的功能列表：
- c2sc — 大写字母中的小写字母
- ccmp — 字形 Composition/Decomposition
- cpsp — 资本间距
- dlig — 自由连字
- dnom — 分母
- frac — 分数
- kern — 字距调整
- liga — 标准连字
- lnum — 衬里数字
- mark — 标记定位
- mkmk — 标记到标记定位
- numr — 分子
- onum — 旧式人物
- pnum — 比例数字
- salt — 文体替代品
- smcp — 小写字母
- ss01 — 文体集 1
- ss02 — 文体集 2
- ss03 — 文体集 3
- ss04 — 文体集 4
- ss05 — 文体集 5
- ss06 — 文体集 6
- ss07 — 文体集 7
- tnum — 表格数字
- unic — Unicase
希望对您有所帮助。
** 已删除，因为与更新的问题无关
不要在网络上使用 otf、ttf、svg 或 eot 字体。前两个是通用的 OpenType 字体，其数据比在 web 上工作所需的数据多得多，包括规范合法的数据，但会被 OTS 等过度保护的解析器拒绝，后两个多年来一直是死格式永远不应该使用。
将原始源（otf 或 ttf，选择哪个无关紧要，除非您知道它为什么重要，这意味着您非常熟悉 OpenType 的内部结构））作为 WOFF 或 WOFF2使用 google 的 woff2 utility or TTX 之类的字体，然后只使用它，并且 仅 那个：
@font-face {
font-family: Roboto;
src: url(./assets/myfonts/roboto.woff2) format("woff2");
}
一切都应该会正常进行。
从 Roboto 存储库构建字体确实会产生无效字体。正如您建立的那样，Chrome（和 Firefox）拒绝它。 Fontforge 的 fontlint 在检查 Roboto 的这个 OTF 时会产生很多错误。在众多关于adavance width不匹配的问题中，结论是：
ERROR 2 Self-intersecting glyph
ERROR 3 Wrong direction
ERROR 5 Missing points at extrema
FAIL Roboto-Regular.otf
这些错误似乎只指向损坏的字形，但这不应该让 Chrome 完全拒绝该字体。
为了好玩，我深入研究了到底是什么破坏了字体。经过一番调查，我在 CFF table 中发现了两个条目，这显然是一种无效的字体：
<FamilyBlues value="0"/>
<FamilyOtherBlues value="0"/>
删除这些将修复字体。 （我会将其添加到您报告的问题中）
关于使用 OpenType 功能：很多布局功能都可以通过 CSS 启用，当然前提是它们在字体中。您可以自己编写 CSS（例如 font-feature-settings: "liga"; 以启用连字），或者使用方便的跨浏览器 CSS 库，例如 Utility OpenType.
我关注了instructions on the google/roboto repository，但是没有OTF文件可以用作webfont。
我能得到的唯一反馈是 Chrome 说 无法解码下载的字体。
OTS 表示一切正常。
为什么会这样？如何在 Web 上使用 Roboto opentype 功能？
仅供参考我也打开了google/roboto#283
这是生成的字体之一：https://drive.google.com/open?id=157_-UBTyswylqY3DOK-mKihd7Vk-vFA_
更新（基于更新的问题）
显然，生成的 OTF 字体没有针对网络进行正确编码 — 所有浏览器都有不同的字体渲染引擎，并且此文件的解码在 Chrome 和 Firefox 中失败，甚至 Font Squirrel 报告 字体损坏，无法转换。有趣的是，在 Safari 中工作得很好。
如果您想使用 Roboto 字体功能，您必须生成自己的网络字体。 I have created a demo page that demonstrates some of Roboto's font features，各种网页字体（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 产生最好的结果并且它是 supported in all modern browsers）以显着减小文件大小，所以您的 @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 功能保留在生成的网络字体中效果很好：
- The already mentioned onlinefontconverter — 您可以选择生成各种字体和网页字体格式
- Font Squirrel Webfont generator — 确保你 select Expert 选项，并在 OpenType Features select 保留所有功能
在旁注中，您可能会发现 LCDF Typetools useful, specifically otfinfo 用作 otfinfo -f Roboto-Regular.ttf 来列出字体支持的所有功能。
以下是 Roboto 字体的功能列表：
- c2sc — 大写字母中的小写字母
- ccmp — 字形 Composition/Decomposition
- cpsp — 资本间距
- dlig — 自由连字
- dnom — 分母
- frac — 分数
- kern — 字距调整
- liga — 标准连字
- lnum — 衬里数字
- mark — 标记定位
- mkmk — 标记到标记定位
- numr — 分子
- onum — 旧式人物
- pnum — 比例数字
- salt — 文体替代品
- smcp — 小写字母
- ss01 — 文体集 1
- ss02 — 文体集 2
- ss03 — 文体集 3
- ss04 — 文体集 4
- ss05 — 文体集 5
- ss06 — 文体集 6
- ss07 — 文体集 7
- tnum — 表格数字
- unic — Unicase
希望对您有所帮助。
** 已删除，因为与更新的问题无关
不要在网络上使用 otf、ttf、svg 或 eot 字体。前两个是通用的 OpenType 字体，其数据比在 web 上工作所需的数据多得多，包括规范合法的数据，但会被 OTS 等过度保护的解析器拒绝，后两个多年来一直是死格式永远不应该使用。
将原始源（otf 或 ttf，选择哪个无关紧要，除非您知道它为什么重要，这意味着您非常熟悉 OpenType 的内部结构））作为 WOFF 或 WOFF2使用 google 的 woff2 utility or TTX 之类的字体，然后只使用它，并且 仅 那个：
@font-face {
font-family: Roboto;
src: url(./assets/myfonts/roboto.woff2) format("woff2");
}
一切都应该会正常进行。
从 Roboto 存储库构建字体确实会产生无效字体。正如您建立的那样，Chrome（和 Firefox）拒绝它。 Fontforge 的 fontlint 在检查 Roboto 的这个 OTF 时会产生很多错误。在众多关于adavance width不匹配的问题中，结论是：
ERROR 2 Self-intersecting glyph
ERROR 3 Wrong direction
ERROR 5 Missing points at extrema
FAIL Roboto-Regular.otf
这些错误似乎只指向损坏的字形，但这不应该让 Chrome 完全拒绝该字体。
为了好玩，我深入研究了到底是什么破坏了字体。经过一番调查，我在 CFF table 中发现了两个条目，这显然是一种无效的字体：
<FamilyBlues value="0"/>
<FamilyOtherBlues value="0"/>
删除这些将修复字体。 （我会将其添加到您报告的问题中）
关于使用 OpenType 功能：很多布局功能都可以通过 CSS 启用，当然前提是它们在字体中。您可以自己编写 CSS（例如 font-feature-settings: "liga"; 以启用连字），或者使用方便的跨浏览器 CSS 库，例如 Utility OpenType.