字体库 在 WordPress 6.5 中引入,允许用户直接在编辑器中管理字体。它附带了一组 API,允许开发人员控制、调整和禁用其行为。
- k8 O. F2 R; Y- D+ `( k/ f1 @5 w+ j% @- ^% A, n* Z# l# H" `& G& q
字体集字体集是用户可以通过编辑器安装的字体系列定义的列表。字体系列定义是theme.json格式中的一个fontFamily项。默认情况下,WordPress 6.5 允许用户选择加入 Google 字体集合列表。为了让网站保持GDPR合规性,安装 Google 字体会将文件下载到 WordPress 服务器。 注册字体集合后,它将出现在编辑器的字体库UI中。从这里,用户可以安装并激活该集合中的字体。
1 B% C* i8 r' Q3 h o0 i) a; d
) y- }" u3 z. Z/ ^4 P
) q( r! _' p; \4 W5 w, `/ q6 K' o7 H添加字体集可以使用wp_register_font_collection()函数添加新的字体集合。这可以通过以PHP或JSON格式提供字体系列及其字体列表作为字体集合数组的一部分来完成。 以下是在 PHP 中添加字体集合的示例: - $font_families = [5 [. d% C# _$ U$ ~9 f4 y
- array(4 V& g7 C" E! X; u3 i3 w
- 'font_family_settings' => (
3 C: x# L; p; y# O; t" ?% `* } - array (
0 R+ i4 ]5 T# J9 [: I2 A( z: i - 'fontFamily' => 'Open Sans, sans-serif',% m8 f$ U) I" T; r) P$ |" \6 L
- 'slug' => 'open-sans',
' \! j: q) R$ y* ` - 'name' => 'Open Sans',
" m) v: R& @5 b9 ^0 z0 p, U" {/ X - 'fontFace' => (
+ z- k, W2 l# P$ k) r. e - array (" X% N/ U6 F/ B/ L
- 'fontFamily' => 'Open Sans',
! p/ J ^0 x+ @3 h3 Y+ K/ v# w - 'fontStyle' => 'normal',! {( N& j7 r! T! Z- b' M% J
- 'fontWeight' => '300',
4 P: g9 G, A. G8 u - 'src' => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'1 u: L; L% _; h3 Q! ^2 v. V
- ),2 o5 p3 t3 [ ^6 T M! \( m* n- b
- array (
J# C9 A) E& b - 'fontFamily' => 'Open Sans',
) ?2 x, O7 R c/ z3 y: A - 'fontStyle' => 'italic',6 V/ X& x: l. y( j! a G# q5 ~
- 'fontWeight' => '400',
) J; \, O, `' u: W9 K/ [ y" j - 'src' => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'
4 K: ~2 Y" P1 h5 N - ),9 m. _ A6 Q) ]3 p4 V- |" r
- ),6 }5 |0 f& T0 f9 |# _! o7 E1 x
- ),
) [$ `0 G" | f5 S( p3 F - ),
, C; _8 Y1 Y1 V0 U" x" Y& ? - 'categories' => [ 'sans-serif' ],
o7 k: j( w1 n# B - ),! U! t, h# w- Z( A
- array(
9 t) N- X7 s, {& ^3 d - 'font_family_settings' => (. A/ ~5 P, S" @+ W
- array (
$ V! S3 `0 d/ J, }4 x, W- L2 ]/ P/ Q - 'fontFamily' => 'Monoton, system-ui',
% _; K3 {$ `# I Z' h3 t+ W) T4 Z- p - 'slug' => 'monoton',
4 M: A! m1 @4 f( v - 'name' => 'Monoton',: o8 c: N1 e1 S$ z3 }2 G
- 'fontFace' => (
, ~4 l6 r" {1 a5 s4 h I - array (8 N$ c& O& K* [9 f3 o8 p- K. z2 ]
- 'fontFamily' => 'Monoton',) H' W( a0 W# E% s2 v
- 'fontStyle' => 'normal',) k, V( d8 F1 n# b) n# J- F: L
- 'fontWeight' => '400',
0 L6 a7 k1 |% ~) u# v2 ]8 G - 'src' => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',
2 G/ L* f% p! R7 P \3 Z - 'preview' => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'. I; z$ K" V6 o: J' G- @- l7 Y
- ),
5 {. N2 ?+ b( H9 B5 w5 E$ S: W - ),/ ?! J2 _9 { t# O/ L
- )
1 F+ u$ m. ]! o R9 ]' ~; V) @* b - ),
0 _, o) F& S# H6 i( B: J7 j - 'categories' => [ 'display' ],
( x1 C4 P) T7 G! F4 f ~* ], F - ),
) y: f- L0 _; z4 t% r# G: b0 ^ e+ ] - array(
1 v' V7 K2 U0 ^' g2 m - 'font_family_settings' => (& @3 c0 k8 C8 @, t
- array (
& H4 {' ^7 v# U- s - 'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
) _7 a# t( J, w - 'slug' => 'arial',7 `: z3 B; X' ~- i/ T
- 'name' => 'Arial',8 ~) L, \6 r5 U
- )# P7 a( g" e3 @$ Z; K' f
- ),# V7 a: D; E: t! C" y& B
- 'categories' => [ 'sans-serif' ],
. B2 L+ l) W6 N7 H8 v* T - ),# O1 P3 o* t/ v" C8 Q
- ];2 f, E! b+ ?3 X( A" p
-
0 Z5 }0 S% D: `5 D1 G Q/ i0 X - $categories = [
A+ f) V- d" J9 t7 d4 Y9 o - array(3 I8 B7 n4 V! [
- 'name' => _x( 'Display', 'Font category name' ),4 r( u7 |1 M9 w0 d8 ?6 d
- 'slug' => 'display',
+ J( T' q# H3 j - ),6 a! ^$ d3 |# n% a
- array(
/ h6 y, h0 C/ C2 g7 l - 'name' => _x( 'Sans Serif', 'Font category name' ),0 V3 J7 q3 B& \& l; T
- 'slug' => 'sans-serif',
. ~5 u0 h% C7 u+ _8 l - ),2 G# G0 y, c7 i$ ~; w9 C5 m8 m# Z
- ];$ o' d) Q" n, v2 J: s
- $config = array (6 R* p( M/ ]1 ~" K
- 'name' => _x( 'My font collection', 'Font collection name' ),0 ]; Y; d. d7 L3 Y
- 'description' => _x( 'A collection of my favorite fonts.', 'Font collection description' ),
: m& ~9 t- Q+ z7 d# {- m; Q: t6 ^) L; S - 'font_families' => $font_families,/ y! i8 V0 J6 Z+ u& l
- 'categories' => $categories, X, y- U) J3 A2 Z" p
- );3 ~( A* m. g0 f
- wp_register_font_collection ( 'my-font-collection', $config );
复制代码请注意, Font Collection 数组的name和description字段必须是可翻译的,这可以通过将字符串包装在 _x() 函数中来实现。字体系列名称通常不被翻译。有关更多信息和背景讨论,请参阅 #60509。 该字段的 JSON 格式font_families可以是本地路径或指向 JSON 文件的远程URL 。
5 R" ?: N5 Z1 ]* q1 r删除字体集可以使用wp_unregister_font_collection()函数禁用字体集合。这是禁用默认字体集合的示例: - add_action( 'init', function() {1 }3 _8 M1 N8 t- J8 J6 w. y
- wp_unregister_font_collection( 'default-font-collection' );2 } P8 ^- D6 D( X9 c
- } );
复制代码
9 w& M2 }$ l, [" f4 P安装和激活字体当字体被“激活”时,主题的全局样式设置将被更新,以便包含该字体以及主题定义的字体,并且可以在全局样式和单个块的版式设置中使用。 切换到新主题时,需要重新激活已安装的字体,以更新该主题的站点全局样式设置。如果重置主题的全局样式,这将停用所有已安装的字体,但它们将保留在站点上,并且可以根据需要重新激活。 此外,字体库可用于停用主题中包含的字体(如果不需要),以提高网站的加载性能。
i( Q% v$ ~9 c+ ^' J- U0 ]自定义字体上传目录请注意,以下一些详细信息(例如函数名称)可能在 6.5 版本之前发生更改。有关更多信息,请参阅 #60751和古腾堡问题 #59699。 默认情况下,字体将上传到该wp-content/fonts目录。但是,可以使用 font_dir 过滤器根据需要自定义该位置。对于不支持修改wp-content目录的安装,wp-content/uploads/fonts将用作后备目录。 可以使用 wp_get_font_dir()返回字体上传目录的位置。 下面的示例将字体目录更改为 WordPress “Uploads”目录(默认情况下为wp-content/uploads): - function alter_wp_fonts_dir( $defaults ) {5 Q& P1 z. l8 T' g
- $wp_upload_dir = wp_get_upload_dir();
. C$ c$ ~9 Q3 c" D4 k+ E/ u2 U - $uploads_basedir = $wp_upload_dir['basedir'];3 U, }/ f. G( o" V3 k
- $uploads_baseurl = $wp_upload_dir['baseurl'];
2 E' {4 x9 }& P8 t }9 ~' k6 o - $fonts_dir = $uploads_basedir . '/fonts';
3 }; C- z# f; u' W - // Generate the URL for the fonts directory from the font dir.! A9 v4 W3 L7 D: Q' x, k1 ~/ S( o
- $fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );1 ?) T, X* \6 n0 [: E" v
- $defaults['path'] = $fonts_dir;. U( F: p8 M' v5 g. ]& v F
- $defaults['url'] = $fonts_url;3 z0 ?% X4 k* B, V* E
- return $defaults;
( Y3 R4 J. \& i+ O) @, X& u - }
( ^; v6 X/ Z- {& M" u! X ] - add_filter( 'font_dir', 'alter_wp_fonts_dir' );
复制代码修改上传位置时,重要的是要确保所选位置存在并且设置了适当的读/写权限。 与wp-content/uploads目录一样,字体上传目录不会坚持 wp_is_file_mod_allowed/DISALLOW_FILE_MODS 以防止字体上传。
$ b1 J+ ?& V' W9 }0 }如何禁用字体库默认情况下可通过编辑器访问字体库。 * C8 Z0 `( O+ G# v7 f
禁用用户界面可以使用过滤器来禁用 UI 来自定义编辑器设置: - function disable_font_library_ui( $editor_settings ) { + ]! p e1 p: Q5 Q) c
- $editor_settings['fontLibraryEnabled'] = false;
% y- t- v m& `. Q, Y2 A - return $editor_settings;
: A+ J4 o7 ]+ @7 k - }5 U- s& U0 ?6 P$ c; ?
- add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );
复制代码 禁用REST API该unregister_post_type()函数可用于删除与字体库关联的帖子类型,并通过扩展 REST API: - add_action( 'init', function() {( U$ m0 d8 d5 P$ G- l' _8 U
- unregister_post_type( 'wp_font_family' );. z2 y' {; J: `9 L3 q. K9 P7 H6 ^
- unregister_post_type( 'wp_font_face' );
) W r2 G; z% f+ k - } );
复制代码这允许扩展程序禁用字体库,同时保留用于管理活动主题提供的字体的 UI。
+ P0 n" l A0 x5 k6 y- w新的 REST API
) K: z5 r( ]# N5 e( f' q4 L字体库功能引入了三个新的 REST API 端点:
- {# t; |1 E. s0 G
0 y; `* D) c: r2 J |