出于隐私考虑,从下一个版本开始,二十十二至二十十七的主题将不会从谷歌地址获取字体。
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-admin
URL 中获取字体。如果子主题替换了设置函数,它应该在将字体包含在编辑器样式数组中之前删除主题目录。二十四有这个(排列较少的行):
$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 进行特殊考虑:
- 上面的例子使用是
'/fonts/montserrat-all.css'
因为它的目录中有 Twenty Sixteen'/fonts/montserrat.css'
。如果子主题的文件名和目录与父主题中的样式表匹配,编辑器将获取这两个样式表。已经具有同名和目录的字体样式表的子主题可以使用mce_css
过滤器来删除额外的文件。 - 如果子主题字体 URL 包含版本查询字符串,无论是硬编码
ver=1.0
还是使用add_query_arg()
,Classic Editor 都会忽略整个样式表。如果前端版本比较重要,只有在非管理页面的时候函数才可以加参数。
子主题还可以构建类似的样式表来覆盖父字体样式表中的选择。如果您想延长字体加载和替换系统字体的时间限制,您可以将属性更改font-display
为swap
并在您的主题样式表中引用父主题的字体文件。
/* 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 -00 FF, U+ 0131 , U+ 0152 -0153 , U+ 02 BB -02 BC, U+ 02 C 6 , U+ 02 DA, U+ 02 DC, U+ 2000 -206 F, U+ 2074 , U+ 20 AC, U+ 2122 , U+ 2191 , U+ 2193 , U+ 2212 , U+ 2215 , U+FEFF, U+FFFD; } |
调整查询字符串
如果您使用或修改Google Fonts URL 中的参数,这些调整将不会再产生预期的效果。add_query_arg
remove_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 ); |