现在,很多 WordPress 主题都采用了第三方 Web 字体,比如非常受欢迎的 Google 网页字体,但是这种第三方字体,对于网站的加载速度的影响是比较大的,此外还可能对用户隐私造成影响。WordPress 主题审核团队一直以来也是不允许在主题中加载第三方或 CDN 的脚本和样式文件的,但是此前对于 Google 字体是唯一放行的例外。不过现在他们E Q N l u已经发布了一个 Web 字体加载器(Webfonts Loader),可* 0 a供主题作者用来为主题集成 Web 字体本地化加载的功能。
也就是说,通过 Webfonts Loader 加载的 Web 字体,会自动将字体文件下载到用户的主机空间中,然后从本地加载,不再需要 CDN 调用外链的字体i ^ \。随# % { ! 1 `着 Webfonts Loader 的到来,以后只要主- h D |题中用到第三方 Web 字体(不仅限于 Google 字体),都需要采用这个加载器实现本地` ) Q F g h g +化调用。
Webfonts Loader
项目地g - O址:https://L D ( c 4 ugithub.com/WPTT/webfon5 W 9 l T Jt-loader
下载网络字体(例如 GoX B / V z ~ 7 j 9ogle 字体),并将其托管在 WordPress 网站本地(下载到 /wpZ a o-content/fonts 目录)。这样可以提高性能(减少对多个顶级域的请求)并增强隐私保护。由于字体是在站点上本地托管的,无需 ping 通到第三方服务器来F m K # % T ; ` @获取 Web 字体,无法进行跟踪。
使用方法
Wob k t i 6 DrdPress 主题通常使用以下 wp_enqueue_style 功能来排队脚本文件:
- function my_theme8 P I __enqueue_assets() 3 I & v x C } R3;
- // Load the themx J - J f _ ce stylesheet.
- wp_enqueue_style(
- 'my-theme',
- get_stylesheet_directory_uri(; ; u) . '/style.css',
- array(),
- '1.0'
- );
- // Load t0 O ? 6 3 0he webfont.
- wp_enqueue_style&5 W [ o 2 A 3 3 w#040;
- 'literata'R a - D m X v V O,
- 'https:/C F 9 % ?/fonts.googleapis.com/css2?family=Literata&display=sR s @ X 9 W wwap',
- arrayy i I * y P(),
- '1.0'
- );
- }
- add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );
要本地托管 Web 字体,您首先需X u = A要从该存储库下载 wptu ) / T T J bt-webfont-loader.php 文件并将其复制到主题中。完成此操作后,以上代码可以转换为以下代码:
- function my_theme_ene 3 A e : M y bqueue_as! r _ lsets() {
- // In[ a 2clude the file.
- require_once get_theme_file_path( 'inc/wptt-webfont-loader.u ? 0 : Y & 8 jphp' );
- // LoaE H ! B 4d the theme stylesheet.
- wp_enqueue_stP $ @ nyleP ` Z 2 ) O c0;
- 'my-them/ g e s & ` oe',
- get_stylesheet_directory_uri() . '/style.css',
- array(),5 # 9 B A o ? ^ t
- '16 3 t \ @ 8 % f z.0'
- );
- // Load the webfont.
- wp_add_inline_style(
- 'my-theme',
- wptt_get_webfon6 \ zt_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap' )
- );
- }
- add_action( 'wp_enqueue_scriptW J = v 7 Ys', 'my_theme_enqueue_assets' );
支持 IE
默认情况下,wptt_get_webfont_styles 将下载.woff2 文件。但是,如果需要支持 IE,则需要使用.woff 文件。为此,您可以在 w\ P s !ptt_get_webfont_styles 函数中,将 woff 作为第二个参数传递:
- wptt_get_webfo+ E / 3 [ Bnt_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' F % m # | n g 2 R041;;
总结
Webfonts Loader 的到来,为所有主题开发者提供了对 WA v R %eb 字体的标准处理方式,但是这个- 6 O Z j \ X u a需要主题开发者进行集成实现。如果你是一般用户,并且主题没有集成这个功能,那你可以使用 OMGF\ C f | Host Google Fonts Locally 或 Self-Ho* E ^ s : / Isted Google Fonts 插件来实现 Google 字体本地化加载。