@Font-孩子主题中的破脸

时间:2015-05-21 作者:Mayeenul Islam

在我的网站中,我使用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。

怎么了?

1 个回复
最合适的回答,由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文件,请遵循相应的正确依赖关系。

结束

相关推荐

Child-theme breaks site

所以,我有一个子主题,里面除了所需的CSS文件之外什么都没有。一旦我激活了这个儿童主题,我的整个网站就关闭了。最后我有两个问题:激活一个只有CSS的子主题怎么能破坏我的网站</我怎样才能回到我原来的主题</这些是网站给我的错误:Warning: require_once(/wp-content/themes/interio_child/admin/options-framework.php) [function.require-once]: 无法打开流:中没有此类文件或目录/wp-c