问题标签 [woff]

我在字体文件夹中创建了一个 fonts.css.scss 文件并给出了以下格式

它使用已编译的字体生成，但无法加载字体系列

我定义了以下@font-face规则：

由于woff字体文件中有一些错误，我已经修复了它，我需要测试字体现在是否正确。

问题是谷歌浏览器ttf默认使用，我无法@font-face在运行时修改 - 由于复杂的管道，我也无法修改服务器上的 CSS。

我们可以以某种方式强制浏览器使用特定的字体文件类型吗？

在我之前的一个问题中，有人向我指出“ woff2 ”格式在Microsoft Edge上不起作用。因此，如果我希望我的网站在 Microsoft Edge 中看起来不错，我必须使用 @font-face 的替代语法。

原始 CSS

建议的 CSS

所以我想做的是为“Dosis”找到所有其他格式（truetype、woff 等），例如..

我用过：http : //webfonts.azurewebsites.net/?fontname=Dosis 它只给了我 400 重量的 Dosis 版本。

您是否知道其他方法，以便我能够以必要的格式获得正确版本的 Dosis？

我正在使用gulp-iconfont将一组 svg 图标转换为 woff 字体。

在图标转换为字体之前，它看起来如下：

它在 woff 文件中的显示方式：

我的 gulp 任务如下：

我的 Illustrator 导出设置：

SVG 代码：

任何想法表示赞赏。

更新：

按照@nfroidure 中的一些建议，我将它们全部设为 300px x 300px，现在我得到了这个并添加了以下选项fontHeight: 16和normalize: true. 产生以下内容：

我将获得 4.3 的平均评分，我需要构建逻辑以在星形图标中显示 4.3 的平均评分（4 个全星，第 5 个星为部分填充）。最大评分数为 5。我通过引用 stackoverflow 示例创建了 jsfiddle，并且我的草稿小提琴中没有得到部分星，结果我得到了整颗星。我的 JSFiddle 截图

JSFiddle 链接：https ://goo.gl/sz1YIJ 请建议。

到目前为止，我一直在使用 Paul Irish 的防弹字体语法

但我只是在看 caniuse 上对 .woff 和 .woff2 文件的支持，它说 IE9+ 支持 woff。大多数关于这个主题的文章都来自 2009 年左右，而在撰写本文时已经是整整 7 年前。当 woff 现在得到如此广泛的支持时，我们真的需要继续声明 ttf、otf、eot 和 svg 吗？

我们正在开发一个包含数千种字体的大型打印应用程序。从历史上看，这些都是使用 Flash 显示的，但显然，我们现在正在研究 HTML5。

WOFF 字体的一个子集显示垂直向下移位最多几个像素 - 这似乎与转换器无关。（我已经尝试了十几个 WOFF 转换并且都显示相同的位置。）

很明显，受影响的字体中有一些东西会导致 WOFF 从 OTF / TTF / SWF 位置垂直向下显示。谁能指出我可以解释什么的参考？

谢谢，G

ETA：在下面的评论之后，我已经编辑了这个以包含一个 MCVE。

选择的示例演示了 ClarendonNo1URW-Lig 字体如何在浏览器外部使用相同字体的预期位置下方显示少量像素。

与使用相同字体从 InDesign 中提取的 PNG 相比，显示带有问题字体的 WOFF 的 HTML 页面的屏幕截图

链接的屏幕截图中的蓝色矩形说明了在询问字体以定位在最后一行的基线和第一行的上升之间时的预期边界 - 以匹配 InDesign 显示定位。

所有定位值都是从这些字体上升/下降值明确计算出来的，并且已经针对 1000 多种字体进行了验证——它们在 90% 以上的字体中都是像素完美的，但有些（例如示例）垂直向下移动。

此外，这种现象在一系列浏览器中似乎都是一致的——在 FireFox、Edge、Opera、Chrome 中观察到类似的行为......

这似乎与转换器无关 - 我已经尝试了从在线 ttf 到 woff 服务再到购买的软件（包括 TransType 等）的近十几种转换器。用原始 TTF 或 OTF（如适用）交换 WOFF 并不能消除问题，所以它可能是原始字体文件本身中的一些东西，暗示浏览器向下显示。但我不知道什么或如何查询它以允许相同。

示例 HTML 页面显示问题如下。使用 lineheight 0 和 spans 的绝对定位是为了消除浏览器渲染器特定的舍入效果，否则会嘲笑任何像素完美字体布局的尝试。

我正在开发一个基于 React.js 的 chrome 扩展，其中所有资产都与 webpack 捆绑在一起。在开发过程中（使用webpack-dev-server），我成功地让 Chrome.woff从localhost:3000. 这是我的开发 webpack 配置的加载器的一部分：

用于开发的 chrome 扩展具有以下特权（除其他外）：

font-src 'self' http://localhost:3000 https://localhost:3000;

这很好用，我可以像这样使用react-fa来使用 font-awesome：

<Icon name="eye" size="2x" />

但是，一旦我停止使用 webpack-dev-server，并构建到要作为 Google chrome 扩展（使用相同的加载器）导入的实际包，我开始在控制台中看到以下错误：

我相信我的 chrome 扩展程序的清单权限设置得当：

font-src 'self';

但由于某种原因，该.woff2文件似乎不在捆绑包中，至少不在该地址。我检查了 bundle/build 文件夹并在/build/js/926c93d201fe51c8f351e858468980c3.woff2.

我如何确保该文件确实可以在该地址访问chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2？

浏览该网站时，所有字体均正常显示。打印页面时，预览和相应的输出都是 Times New Roman 格式。这是我的 CSS 规则：

刚刚注意到这种情况正在发生。该行为不会出现在任何版本的 IE、Firefox、Chrome 等中。我一直在搜索，但在打印时没有发现任何与此相关的信息，只有 Edge 不支持 woff2 之类的东西。

在这里它正确渲染：

它在打印预览中，这也是它打印/保存为 PDF 的方式：

是的，我知道这是一个被问到又被问到的问题。我更愿意认为我做了功课，但我的浏览器仍然没有从网络服务器中提取字体（根据日志）。

CSS：

测试页面在我的测试站点这里。由于我没有选择和想法，我决定在这里问，作为最后的手段。