Google 字体包含在本地捆绑的主题中

出于隐私考虑,从下一个版本开始,二十十二至二十十七的主题将不会从谷歌地址获取字体。

20 12 3.9
20 13 3.8
二十四 3.6
二十五 3.4
二十六 2.9
二十七 3.2

每个主题都将提供站点域下主题目录中的新样式表。使用多种字体,Twenty-13 创建了如下引用:

<link rel='stylesheet' id='twentythirteen-fonts-css' href='https://example.com/wp-content/themes/twentythirteen/fonts/source-sans-pro-plus-bitter.css?ver=20230328' media='all' />

如果您编辑或删除了子主题插件中的字体样式表,请确认您的网站是否可以正常使用此更改。

语言支持

当一种语言禁用了某些自定义字体时,样式表应继续遵守该设置。

Google Fonts 提供了所有字符集,忽略了URL中指定的任何内容,因此所有六个主题的新样式同样收集了任何字符集的字体文件。现代浏览器只选择页面所需的集合。

开发人员可能仍然只选择某些字符子集,以创建简化的样式表或在资源提示中使用preload创建一组语言代码可能会有所帮助,将它们映射到它们的脚本家族。

在自定义主题设置函数中修复编辑器样式

二十四、二十十五和二十十六允许自定义覆盖子主题中的设置功能。

  • twentyfourteen_setup()
  • twentyfifteen_setup()
  • twentysixteen_setup()

对于编辑器,新的字体样式表 URL 需要在函数中是相对的add_editor_style(),否则它会尝试从不存在的wp-adminURL 中获取字体。如果子主题替换了设置函数,它应该在将字体包含在编辑器样式数组中之前删除主题目录。二十四有这个(排列较少的行):

$font_stylesheet = str_replace(
    array(
        get_template_directory_uri() . '/',
        get_stylesheet_directory_uri() . '/'
    ),
    '',
    twentyfourteen_font_url()
);
add_editor_style(
    array(
        'css/editor-style.css',
        $font_stylesheet,
        'genericons/genericons.css'
    )
);

删除字体样式表

Twenty Fifteen 和 Twenty Sixteen 自首次亮相以来就允许更换字体样式表,其他四个主题的即将推出的版本也将启用相同的功能。(这四个的先前版本会通过两次声明该函数而导致错误。)

要删除字体样式表并使用系统字体,您可以在子主题的functions.php.

function twentyfifteen_fonts_url() {
    return '';
}

为了防止旧版本的二十十二、二十三、二十十四或二十七出现错误,子主题可以在声明函数之前为父主题建立一个最低版本。

if ( version_compare( wp_get_theme( 'twentythirteen' )->get( 'Version' ), '3.8', '>=' ) ) {
    function twentythirteen_fonts_url() {
        return '';
    }
}

在子主题中包含一组自定义字体

子主题可以包括一组不同的字体和它自己的样式表。例如,一个网站需要为 Montserrat 添加额外的字重和样式——但不使用 Twenty Sixteen 的其他字体——可以在其functions.php:

function twentysixteen_fonts_url() {
    return get_stylesheet_directory_uri() . '/fonts/montserrat-all.css';
}

经典编辑器需要对新 URL 进行特殊考虑:

  1. 上面的例子使用是'/fonts/montserrat-all.css'因为它的目录中有 Twenty Sixteen '/fonts/montserrat.css'。如果子主题的文件名目录与父主题中的样式表匹配,编辑器将获取这两个样式表。已经具有同名和目录的字体样式表的子主题可以使用mce_css 过滤器删除额外的文件
  2. 如果子主题字体 URL 包含版本查询字符串,无论是硬编码ver=1.0还是使用add_query_arg(),Classic Editor 都会忽略整个样式表。如果前端版本比较重要,只有在非管理页面的时候函数才可以加参数

子主题还可以构建类似的样式表来覆盖父字体样式表中的选择。如果您想延长字体加载和替换系统字体的时间限制,您可以将属性更改font-displayswap并在您的主题样式表中引用父主题的字体文件。

/* montserrat-latin-400-normal */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    /* Go up two levels if this stylesheet is at '/fonts/montserrat-all.css' in the child theme. */
    src:
        url('../../twentysixteen/fonts/montserrat/montserrat-latin-400-normal.woff2?ver=25') format('woff2'),
        url('../../twentysixteen/fonts/montserrat/montserrat-all-400-normal.woff?ver=25') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

调整查询字符串

如果您使用或修改Google Fonts URL 中的参数,这些调整将不会再产生预期的效果。add_query_argremove_query_arg

如果没有子主题,可以在插件中替换默认样式表:

function wpdocs_replace_twentyseventeen_font_stylesheet( $src, $handle ) {
    if ( 'twentyseventeen-fonts' === $handle ) {
        $src = plugins_url( '/css/new-font.css', __FILE__ );
    }
    return $src;
}
add_filter( 'style_loader_src', 'wpdocs_replace_twentyseventeen_font_stylesheet', 10, 2 );
// Adjust for Classic Editor, too.
function wpdocs_replace_twentyseventeen_font_for_classic_editor( $mce_css ) {
    if ( ! empty( twentyseventeen_fonts_url() ) ) {
        $mce_css = str_replace(
            twentyseventeen_fonts_url(),
            plugins_url( '/css/new-font.css', __FILE__ ),
            $mce_css
        );
    }
    return $mce_css;
}
add_filter( 'mce_css', 'wpdocs_replace_twentyseventeen_font_for_classic_editor', 11 );

继续使用谷歌字体

如果您创建了自定义 Google 字体 URL,并且不需要更改它以满足隐私法,您可能需要恢复preconnect资源提示过滤器。PHP注释禁用它,但子主题或插件可以再次添加过滤器每个主题都有自己的过滤器回调名称:

add_filter( 'wp_resource_hints', 'twentytwelve_resource_hints', 10, 2 );
订阅评论
提醒
guest的头像

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x