字体系列不适用于字体

Question

http://www.chooseyourtelescope.com/

页面中间的大"C"，H1('Choose The Right...) 应该写成"Pirulen" font-family

我首先尝试了 "classic" @font-face 方法，然后使用 WEBFONT GENERATOR 并添加在 MyFonts 文件夹中创建的所有文件的高级方法。

CSS

@font-face {
    font-family: 'pirulenregular';
    src: url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.eot');
    src: url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.woff') format('woff'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
         url('/www/wp-content/themes/virtue - child/MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

但是还是不行

Answer 1

您的 url 需要是网络 url，而不是文件路径。您通常将其设置为相对于 css 文件的位置，因此它将是：

@font-face {
    font-family: 'pirulenregular';
    src: url('MyFonts/pirulen_rg-webfont.eot');
    src: url('MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
     url('MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
     url('MyFonts/pirulen_rg-webfont.woff') format('woff'),
     url('MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
     url('MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

下一个问题是您在页面上将字体系列指定为 "pirulen" 但在 CSS 中它是 "pirulenregular"，这些必须匹配，所以选择一个。

字体系列不适用于字体

Font Family not working with font face

css

fonts

font-face