Question

我正在尝试在开发Wordpress网站时安装要脱机使用的字体。这是我试图做的，但它仍然不起作用：

通过fontsquirrel.com创建字体
将文件内容添加到/ wp-content / themes / myTheme / font
在我的style.css文件中，我添加了以下代码：

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

然后，我尝试通过以下代码更改正文字体：

body {
font-family: 'latobold', sans-serif;
}

我的字体默认为sans-serif。如果我删除sans-serif，那就是Times New Roman。我想我有一个url路径名问题。

Answer 1

首先，你的字体文件不应该在/wp-content/font文件夹中。假设您的主题文件夹名为myawesometheme。

你真的应该把font文件夹放在这里：

/wp-content/themes/myawesometheme/font

style.css的路径如下：

/wp-content/themes/myawesometheme/style.css对于字体来说就像这样：

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

你说你从fontsquirrel.com生成了代码。它非常可靠。只是为了确保字体文件正常工作并且在上传之前没有损坏。并仔细检查font-family

的字体名称

我猜Google字体不是一种选择，正如您所说的“离线开发”。但你可以从那里下载该字体。

安装脱机Intranet网站使用的字体

1 个答案: