Question

在我的网页上，可以使用Google网络字体。

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,300italic,400italic,600italic">

<div style="font-family: 'Source Code Pro';">My Text</div>

可以这样使用。但是我已经托管了.otf字体，但是我想在我的网页上使用它，我尝试使用like

 @font-face {
            font-family: 'MyFontName';
            src: url("https://www.mywebsitepage.com/fonts/MyHostedFont.otf") format("opentype");
        }

<div style="font-family: 'MyFontName';">My Text</div>

但是它不起作用。使用我的字体的原因是我无法在免费的Google网络字体中找到我的字体。

Answer 1

关于您的样本，我希望不是您真正使用它的情况。我的意思是，您有一个单独的 .css 文件，其中包含font-face声明，并将此文件附加到文档的head中，或像{{1 }}在文档<style>...</style>中的构造也更好。如果是，那么您可以尝试不使用.otf，而是使用.woff和.woff2。

现在不适合将 .otf 用于网络字体。当前，如果您真的不需要支持旧版本的IE（8及更低版本），则只需加载 .woff 和 .woff2 格式的字体即可，需要。像这样：

head

如果您使用.otf字体，则可以使用https://transfonter.org/或类似的在线生成器，轻松地将其转换为需要Web字体格式。

在我的网页中使用服务器托管的otf字体

1 个答案: