外贸独立站的底层设计密码WordPress 成品站模板
当前位置:首页>WordPress建站>WordPress开发>WordPress主题团队开发Web字体加载器,本地化Web字体加载

WordPress主题团队开发Web字体加载器,本地化Web字体加载

现在,很多WordPress主题都采用了第三方Web字体,比如非常受欢迎的Google 网页字体,但是这种第三方字体,对于网站的加载速度的影响是比较大的,此外还可能对用户隐私造成影响。

WordPress主题审核团队一直以来也是不允许在主题中加载第三方或CDN的脚本和样式文件的,但是此前对于Google字体是唯一放行的例外。不过现在他们已经发布了一个Web字体加载器(Webfonts Loader),可供主题作者用来为主题集成Web字体本地化加载的功能。

也就是说,通过Webfonts Loader加载的Web字体,会自动将字体文件下载到用户的主机空间中,然后从本地加载,不再需要CDN调用外链的字体。

随着Webfonts Loader的到来,以后只要主题中用到第三方Web字体(不仅限于Google字体),都需要采用这个加载器实现本地化调用。

Webfonts Loader

项目地址:https://github.com/WPTT/webfont-loader

下载网络字体(例如Google字体),并将其托管在WordPress网站本地(下载到 /wp-content/fonts 目录)。

这样可以提高性能(减少对多个顶级域的请求)并增强隐私保护。由于字体是在站点上本地托管的,无需ping通到第三方服务器来获取Web字体,无法进行跟踪。

用法

WordPress主题通常使用以下wp_enqueue_style功能来排队脚本文件:

function my_theme_enqueue_assets() {
	// Load the theme stylesheet.
	wp_enqueue_style(
		'my-theme',
		get_stylesheet_directory_uri() . '/style.css',
		array(),
		'1.0'
	);
	// Load the webfont.
	wp_enqueue_style(
		'literata',
		'https://fonts.googleapis.com/css2?family=Literata&display=swap',
		array(),
		'1.0'
	);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

要本地托管Web字体,您首先需要从该存储库下载wptt-webfont-loader.php文件并将其复制到主题中。完成此操作后,以上代码可以转换为以下代码:

function my_theme_enqueue_assets() {
	// Include the file.
	require_once get_theme_file_path( 'inc/wptt-webfont-loader.php' );
	// Load the theme stylesheet.
	wp_enqueue_style(
		'my-theme',
		get_stylesheet_directory_uri() . '/style.css',
		array(),
		'1.0'
	);
	// Load the webfont.
	wp_add_inline_style(
		'my-theme',
		wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

支持IE

默认情况下,wptt_get_webfont_styles将下载.woff2文件。但是,如果需要支持IE,则需要使用.woff文件。为此,您可以在wptt_get_webfont_styles函数中,将woff作为第二个参数传递:

wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' );

总结

Webfonts Loader 的到来,为所有主题开发者提供了对Web字体的标准处理方式,但是这个需要主题开发者进行集成实现。

如果你是一般用户,并且主题没有集成这个功能,那你可以使用 OMGF | Host Google Fonts LocallySelf-Hosted Google Fonts 插件来实现Google字体本地化加载。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

WordPress 5.5+ 可为元数据(meta data)注册默认值

2020-8-5 8:55:34

WordPress开发

如何创建和自定义WordPress子主题

2020-10-29 9:14:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索