关于自定义字体的困惑

Question

我建立了一个使用Avenir字体的网站。看来该字体不适用于Windows计算机（我在Mac上开发了该网站）。

我的问题是，根据this教程，我希望字体能够正确加载。到目前为止，Avenir字体在Mac上看起来还不错，但是我有一个单独的联系人告诉我，为其计算机（显然是Windows计算机）加载的字体是Times New Roman的默认字体。

我正在使用CPanel，如果这很重要，这是项目的结构：

我有一个style.css文件，该文件设置了@font-face，并且根据链接的教程在全局范围内设置了字体系列。

在CPanel上，我将style.css和.woff文件上传到同一根目录中的文件管理器> public_html下。我的项目结构如下：

这是否意味着我的CSS文件无法找到.woff文件？还是这会成为CPanel的问题？

很难调试，因为我的计算机上显然已经装有Avenir。因此，在没有@font-face和所有.woff文件的情况下，字体显示就很好。除字体外，style.css文件中的所有颜色和间距都可以正确呈现。只有字体显示不正确。

Stack Exchange向我推荐了this个帖子，但在该帖子中，该问题似乎是相对路径问题。我怀疑问题的根源是否相同，因为.woff文件位于同一目录中，并且我以两种不同的方式（src: url('font')和src: url('./font')）尝试了import语句。 / p>

任何建议将不胜感激！

Answer 1

我在字体外观定义中没有发现任何问题。您可以在local属性中同时使用url和src。

尝试在url的{​​{1}}参数中提供字体文件的完整网址。

还可以考虑阅读以下问题：

Avenir Next Pro有哪些Google Webfonts或Typekit替代品？ https://graphicdesign.stackexchange.com/questions/16036/what-are-google-webfonts-or-typekit-alternatives-to-avenir-next-pro

在下面的演示中，我使用了https://fonts.googleapis.com/css?family=Nunito&display=swap的css。

希望这会有所帮助。

src

h1 {
font-size: 50px;
font-family: 'Nunito';
}

/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOOaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIMeaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOuaBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIO-aBTMnFcQIG.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaBTMnFcQ.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}