Question

我正在尝试在Wordpress Gantry

上为Gantry Framework添加一些自定义字体直到现在我所做的是：

在wp-content / themes / my_theme_folder / custom / fonts文件夹中，我上传了我的eot，ttf，svg，woff字体文件。

然后在custom.scss文件中插入了代码：

@font-face {
font-family: 'war';
src: url('war-webfont-webfont.eot'); /* IE9 Compat Modes */
src: url('war-webfont-webfont.woff') format('woff'), /* Pretty Modern       Browsers */
url('war-webfont-webfont.ttf')  format('truetype'), /* Safari, Android,     iOS */
url('war-webfont-webfont.svg') format('svg'); /* Legacy iOS */
}

我正在尝试通过检查器设置元素的样式：

p {font-family: 'war';}

但没有任何反应。字体被识别（不是删除线），但字体不显示。

这是插入自定义字体的正确方法吗？

我也跟随Gantry Fonts Tutorial，但也没有成功。

Answer 1

字体名称是你在font-family属性中写的那个，所以我认为它应该是：

p {font-family: 'din';}

Answer 2

为了使字体能够在Gantry Framework上工作，我插入了CSS：

@font-face {
    font-family: 'myfont';
    src: url('wp-content/themes/g5_hydrogen/custom/fonts/war-webfont-   webfont.eot'); /* IE9 Compat Modes */
    src: url('wp-content/themes/g5_hydrogen/custom/fonts/war-webfont-webfont.woff') format('woff'), /* Pretty Modern Browsers */
    url('wp-content/themes/g5_hydrogen/custom/fonts/war-webfont-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('wp-content/themes/g5_hydrogen/custom/fonts/war-webfont-webfont.svg') format('svg'); /* Legacy iOS */
    }

然后我可以通过他们的名字轻松使用它们：

p {font-family: myfont;}

将自定义字体添加到Gantry Framework

2 个答案: