Chrome 浏览器不会从远程加载自定义字体 URL

Question

在我的网页中使用这个 css 来使用自定义字体：

      @font-face {
    font-family: "Bryant-Light-LIV";
    src: url("http://www.[mywebpage].com/wp-content/uploads/promos/bryant-light-webfont.woff") format("woff");
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
  }

这适用于除 Chrome 以外的所有浏览器。但是，当我使用相对 URL 作为自定义字体时，它适用于所有浏览器，包括 Chrome.

@font-face {
    font-family: "Bryant-Light-LIV";
    src: url("img/bryant-light-webfont.woff") format("woff");
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
  }

不幸的是，这将是一封 HTML 电子邮件，所以我无法使用本地文件引用来获取字体。发生这种情况的任何原因或修复建议？

Answer 1

这似乎对我有用，来自 Google 字体：

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

.openSans {
  font-family: 'Open Sans';
}

这是代码笔linkhttps://codepen.io/palash/pen/baOxZG

编辑：由于您是通过电子邮件发送的，我认为您可以使用的字体数量有限，并且根据电子邮件客户端的不同，您的外部字体可能无法加载。在这种情况下，您只能依赖系统字体。

Answer 2

此方法将可靠地用于 IOS 的电子邮件客户端和 Google 字体的其他电子邮件客户端：

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

将此添加到相关区域的 <style> 表中：

font-family: 'Open Sans', sans-serif;

我试图查看 Typewolf 关于在电子邮件中使用 Bryant 的建议，但你只能靠自己了。希望它支持 <link> 或 @import 并允许您像 Google 那样 link 到它的字体服务器。

Web 字体在 Outlook 或 Gmail 中不起作用

Gmail 不支持任何类型的网络字体，包括 Google 字体。 Outlook 支持似乎取决于字体。名称中带有 space 的任何字体都会导致 Outlook 恢复为默认字体 Times New Roman。网络字体不适用于 Yahoo!或注释等。

这会让您更好地了解电子邮件中的工作原理：

祝你好运。

Chrome 浏览器不会从远程加载自定义字体 URL

Chrome Browser won't load custom font from remote URL

css

email

fonts

font-face