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';
}

这是一个代码链https://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一样链接到它的字体服务器。

网络字体无法在Outlook或Gmail中使用

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

这可以让您更好地了解电子邮件中的作用：

祝你好运。

Chrome浏览器无法从远程网址加载自定义字体

2 个答案: