html - 安装离线内网网站使用的字体

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;
}

我的字体默认为其他无衬线字体。如果我删除无衬线体，它就是 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

的字体名称

我想谷歌字体不是一个选项，正如你所说的“离线开发”。但您实际上可以从那里下载该字体。