wordpress 自定义字体在Mac Safari浏览器上的某些页面上工作,但在其他页面上不工作

3pmvbmvn  于 2023-03-22  发布在  WordPress
关注(0)|答案(1)|浏览(185)

我在一个网站上工作。网站链接是:https://chessteacher.org/我在网站上使用自定义字体“MV Boli”。我生成了字体外观,并在子主题中添加了字体项。字体显示在主页上,但在**“Mac Safari”**浏览器上的其他页面上不起作用。这是字体外观。

@font-face {
    font-family: 'MV Boli', sans-serif;
    src: url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.eot');
    src: url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.eot?#iefix') format('embedded-opentype'),
        url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.woff2') format('woff2'),
        url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.woff') format('woff'),
        url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.ttf') format('truetype'),
        url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.svg#MVBoli') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

我在“自定义〉附加CSS”中添加了上述代码。提前感谢您的帮助。

gudnpqoy

gudnpqoy1#

如果您在开发工具网络选项卡中检查您的站点,您会看到Boli未加载。
由于“MV Boli”只有一种字体样式(斜体)和一种字体粗细(正常/400),因此您还需要确保所有文本元素仅使用这些样式。
这一点很重要,因为像<h1>这样的标题标签在默认情况下会使用更粗的字体粗细和普通(非斜体)字体样式。

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "MV Boli", sans-serif;
  font-weight: normal;
  font-style: italic;
}

此外,最好删除@font-face规则中的2 font-family值。
@font-face规则旨在将字体系列名称Map到特定的字体文件,因此,您不需要像“sans-serif”这样的备用系列名称。

@font-face {
    font-family: 'MV Boli';
    src: url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.woff2') format('woff2'),
        url('https://fonts.cdnfonts.com/s/38058/MVBOLI.woff') format('woff'),
        url('https://chessteacher.org/wp-content/themes/kadence-child/fonts/MVBoli.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

相关问题