在我的网站中,我使用Bootstrap作为基本结构(bootstrap.min.css
), 使用我自己的样式表(style.css
) 进行进一步的增强或修改。我宣布@font-face
在我的样式表中,如下所示:
@font-face {
font-family: \'roboto_condensedregular\';
src: url(\'fonts/RobotoCondensed-Regular-webfont.eot\');
src: url(\'fonts/RobotoCondensed-Regular-webfont.eot?#iefix\') format(\'embedded-opentype\'),
url(\'fonts/RobotoCondensed-Regular-webfont.woff\') format(\'woff\'),
url(\'fonts/RobotoCondensed-Regular-webfont.ttf\') format(\'truetype\'),
url(\'fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular\') format(\'svg\');
font-weight: normal;
font-style: normal;
}
它工作得很好,但在我的孩子主题中,Roboto字体根本没有加载。我把我的风格排在
functions.php
如下所示:
function project_child_theme_enqueue_styles() {
wp_enqueue_style( \'parent-style\', get_template_directory_uri() . \'/style.css\' );
wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri() . \'/style.css\' );
}
add_action( \'wp_enqueue_scripts\', \'project_child_theme_enqueue_styles\' );
我甚至试着重新澄清
@font-face
在具有父主题字体路径的“我的子主题”中:
@font-face {
font-family: \'roboto_condensedregular\';
src: url(\'../parenttheme/fonts/RobotoCondensed-Regular-webfont.eot\');
src: url(\'../parenttheme/fonts/RobotoCondensed-Regular-webfont.eot?#iefix\') format(\'embedded-opentype\'),
url(\'../parenttheme/fonts/RobotoCondensed-Regular-webfont.woff\') format(\'woff\'),
url(\'../parenttheme/fonts/RobotoCondensed-Regular-webfont.ttf\') format(\'truetype\'),
url(\'../parenttheme/fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular\') format(\'svg\');
font-weight: normal;
font-style: normal;
}
我检查了浏览器控制台并确认字体文件没有404。
怎么了?
最合适的回答,由SO网友:Mayeenul Islam 整理而成
问题不在你的@字体中,而是在functions.php
您将样式表排入队列的位置。
我假设您的父主题是将样式表排队,如下所示:
<link rel=\'stylesheet\' id=\'bootstrap-css\' href=\'http://example.com/wp-content/themes/parenttheme/bootstrap.min.css\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'style-css\' href=\'http://example.com/wp-content/themes/parenttheme/style.css\' type=\'text/css\' media=\'all\' />
但你的孩子主题中发生了什么:
<link rel=\'stylesheet\' id=\'parent-style-css\' href=\'http://example.com/wp-content/themes/parenttheme/style.css\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'child-style-css\' href=\'http://example.com/wp-content/themes/childtheme/style.css\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'bootstrap-css\' href=\'http://example.com/wp-content/themes/parenttheme/bootstrap.min.css\' type=\'text/css\' media=\'all\' />
因为子主题的代码得到了优先权。
因此,您需要以下内容-正确的样式表依赖顺序(as mentioned here 具有$deps
):
wp_enqueue_style( \'parent-style\', get_template_directory_uri() . \'/style.css\', array(\'bootstrap\') );
wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri() . \'/style.css\', array( \'parent-style\' ) );
注意
array(\'bootstrap\')
父样式声明将在引导后加载父样式,并且
array( \'parent-style\' )
关于子样式的声明将在父样式之后加载子样式。
<link rel=\'stylesheet\' id=\'bootstrap-css\' href=\'http://example.com/wp-content/themes/parenttheme/bootstrap.min.css\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'parent-style-css\' href=\'http://example.com/wp-content/themes/parenttheme/style.css\' type=\'text/css\' media=\'all\' />
<link rel=\'stylesheet\' id=\'child-style-css\' href=\'http://example.com/wp-content/themes/childtheme/style.css\' type=\'text/css\' media=\'all\' />
如果父主题中有更多其他CSS文件,请遵循相应的正确依赖关系。