更改字体显示 - 当我不控制@font-face样式表时

问题描述 投票：0回答：1

我正在使用 Monotype 字体订阅。不幸的是，在 Monotype 样式表中，

font-display
设置为 
swap
，这会导致无样式文本的 Flash。如何将 
font-display
设置为 
block
以获得不可见文本的 FOIT Flash？ Monotype 没有提供控制这一点的方法。有没有办法可以在 CSS 或 HTML 中覆盖它？我尝试将 
font-display: block
添加到样式表中的元素，但在浏览器开发工具中它显示为错误“未知属性名称”。

Monotype（字体）样式表的链接是 

<head>

<link rel="preconnect" href="https://cdn.fonts.net">
<link href="https://cdn.fonts.net/kit/xxxxx.css" rel="stylesheet" />

在浏览器网络开发工具中我可以看到 Monotype 工作表：

/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx");
@font-face {
    font-family: "BentonSansProRegular";
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('BentonSansPro/BentonSansProRegular_normal_normal.woff2') format('woff2'), url('BentonSansPro/BentonSansProRegular_normal_normal.woff') format('woff');
}

更新

我尝试克隆 Monotype 样式表，将 

font-display
更改为 
block
并将样式表添加到我的服务器。但字体不显示。正在使用后备字体。这是我的代码：

头

<link rel="preconnect" href="https://cdn.fonts.net">
<link href="https://www.xyz.co.uk/assets/fonts.css" rel="stylesheet">

样式表

/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx");
@font-face {
    font-family: "BentonSansProRegular";
    font-style: normal;
    font-stretch: normal;
    font-display: block;
    src: url('https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx/BentonSansPro/BentonSansProRegular_normal_normal.woff2') format('woff2'), url('https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx/BentonSansPro/BentonSansProRegular_normal_normal.woff') format('woff');
}
css fonts font-face webfonts
1个回答
0
投票

您应该能够根据您拥有的来源自行定义字体。我用 Google-Fonts 字体“Roboto”演示了这一点：

通常您会在 

<head>
中包含以下行：

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

然后您可以在任何元素上使用 

font-family: "Roboto"
。要更改 
@font-face
声明，只需复制您在头脑中链接的样式表并删除 
<link …>
元素。现在链接复制的样式表并根据您的喜好进行更改。例如，以 
latin
的原始声明为例：

/* original: latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEzAdLw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

您可以将其更改为：

/* customized: latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEzAdLw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

显然，您需要更改声明的“Roboto”-font-face 的每一次出现。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.