我关注了 instructions on the google/roboto repository , 但没有 OTF 文件可以用作 webfont。
我能得到的唯一反馈是 Chrome 说无法解码下载的字体。
OTS说一切都很好。
为什么会这样,我如何在网络上使用 Roboto opentype 功能?
仅供引用我也开了google/roboto#283
这是生成的字体之一:https://drive.google.com/open?id=157_-UBTyswylqY3DOK-mKihd7Vk-vFA_
最佳答案
更新(基于更新的问题)
显然,生成的 OTF 字体没有为 Web 正确编码——所有浏览器都有不同的字体渲染引擎,在 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 的所有字体功能,您可以使用它们来生成您的 Web 字体文件。如果您愿意,您甚至可以使用 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 功能保留在生成的 Web 字体中方面效果很好:
在旁注中,您可能会发现 LCDF Typetools有用,特别是 otfinfo用作
otfinfo -f Roboto-Regular.ttf
列出字体支持的所有功能。以下是 Roboto 字体的功能列表:
我希望你会发现这很有帮助。
** 已删除,因为与更新的问题无关
关于fonts - 无法解码 OpenType Roboto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47991948/