fonts - 无法解码 OpenType Roboto

标签 fonts webfonts opentype roboto

我关注了 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 ,各种网页字体( woff2woffotfttf )经历以下步骤:

一旦你运行 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 字体中方面效果很好:
  • The already mentioned onlinefontconverter — 可以选择生成各种字体和网页字体格式
  • Font Squirrel Webfont generator — 确保您选择专家选项,并在 OpenType 功能下选择保留所有功能

  • 在旁注中,您可能会发现 LCDF Typetools有用,特别是 otfinfo用作 otfinfo -f Roboto-Regular.ttf列出字体支持的所有功能。

    以下是 Roboto 字体的功能列表:
  • c2sc — 来自首都的小资本
  • ccmp — 字形组合/分解
  • cpsp — 资本间距
  • dlig — 自由连字
  • dnom — 分母
  • frac — 分数
  • 字距 - 字距
  • liga — 标准连字
  • lnum — 衬里图
  • mark — 标记定位
  • mkmk — 标记到标记定位
  • numr — 分子
  • onum — 老式人物
  • pnum — 比例数字
  • 盐 — 替代文体
  • smcp — 小资本
  • ss01 — 风格集 1
  • ss02 — 风格套装 2
  • ss03 — 文体套装 3
  • ss04 — 文体套装 4
  • ss05 — 文体套装 5
  • ss06 — 文体套装 6
  • ss07 — 风格集 7
  • tnum — 表格数字
  • unic — Unicase

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

    ** 已删除,因为与更新的问题无关

    关于fonts - 无法解码 OpenType Roboto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47991948/

    相关文章:

    fonts - 如何使用音乐字体 Bravura Text?

    html - Firefox 的 iframe 中不显示字体

    qt - PhantomJS 2.0 文本在呈现为 PDF 时无法选择

    html - 在CSS中使用@font_face添加本地ttf字体

    wordpress - 谷歌字体渲染问题?机器人

    c++ - xlib 上的 TTF/OTF 字体

    iphone - 如何在 UILabel 上制作倒影?

    javascript - Webfont 性能 - webfontloader 与预加载

    javascript - Uncaught ReferenceError : WebFont is not defined

    java - 如何在 Java 中使用 Open Type 字体?