美妙社  ›  WordPress

WordPress 6.5 新功能:字体库 详解

DivivitYan懵逼VIP5 WP教程 2024-4-3 23:25:114.7K 次点击 阅读模式     
字体库 在 WordPress 6.5 中引入,允许用户直接在编辑器中管理字体。它附带了一组 API,允许开发人员控制、调整和禁用其行为。* \! {- }$ D! ?

0 n  @& }; n# q* f) @) K字体集
字体集是用户可以通过编辑器安装的字体系列定义的列表。字体系列定义是theme.json格式中的一个fontFamily项。默认情况下,WordPress 6.5 允许用户选择加入 Google 字体集合列表。为了让网站保持GDPR合规性,安装 Google 字体会将文件下载到 WordPress 服务器。
注册字体集合后,它将出现在编辑器的字体库UI中。从这里,用户可以安装并激活该集合中的字体。
wp-65-font-library.jpg 8 L" F# A- c: o
  h- q  Z4 E, |1 B
/ s3 v; C0 Z) k
添加字体集
可以使用wp_register_font_collection()函数添加新的字体集合。这可以通过以PHP或JSON格式提供字体系列及其字体列表作为字体集合数组的一部分来完成。
以下是在 PHP 中添加字体集合的示例:
  1. $font_families = [
    ; q% x- N: f8 i5 q% h) ~  f
  2.         array(
    5 e, j, K: M3 N1 v; X* A
  3.                 'font_family_settings' => (
    4 f4 J* i+ U) {/ h
  4.                         array (
    9 n3 Q" I( p1 A$ ~( g
  5.                                 'fontFamily' => 'Open Sans, sans-serif',3 G$ U, i7 }! ^5 s# G4 ~' g3 G
  6.                                 'slug'       => 'open-sans',7 p) o5 |, _/ ?, t- x
  7.                                 'name'       => 'Open Sans',
    # O: x, t$ M" H' W8 g" r% ]
  8.                                 'fontFace'   => (# |* i4 S! R1 {6 Q' N
  9.                                         array (: A; ?/ i" l1 {! {) n# U% h
  10.                                                         'fontFamily' => 'Open Sans',
    % J4 X9 a7 z3 i* L) z
  11.                                                         'fontStyle'  => 'normal',/ g& x, |" ?3 o
  12.                                                         'fontWeight' => '300',
    & @3 x' V# x) t
  13.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'- U2 f9 X7 U' f6 t
  14.                                         ),/ `/ l1 u6 f: @. W' C# G0 V
  15.                                         array (: t! t# `) i( R0 M( Q
  16.                                                         'fontFamily' => 'Open Sans',1 u5 S. ?& y# V2 X& M" D& E
  17.                                                         'fontStyle'  => 'italic',4 B1 n$ w% E: F! q
  18.                                                         'fontWeight' => '400',! v2 G2 h/ ~2 W$ k) |7 p
  19.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'
    : c: K5 `7 o3 Q$ i. Y" }; o4 ]
  20.                                         ),' @  B) s+ x' m1 d
  21.                                 ),: J, H4 `6 Z! f. }, [5 s; P
  22.                         ),
    . [6 g/ D) `' w) _2 Y
  23.                 ),$ A9 [8 X7 q; W8 m1 p
  24.                 'categories' => [ 'sans-serif' ],
    # G; _0 ^& f; t+ g2 O' h, l
  25.         ),
    - V* J1 A+ c! \0 n/ m) F
  26.         array(/ @1 q" t# d- R+ @+ I
  27.                 'font_family_settings' => (
    3 z; \+ C4 v+ c+ X
  28.                         array (
    " \+ y, u( ]$ o& k2 _# G$ @# d% I
  29.                                 'fontFamily' => 'Monoton, system-ui',  Z. F9 V% s) y4 B+ T/ X8 q
  30.                                 'slug'       => 'monoton',& x& m1 b3 n$ [3 l, l2 m
  31.                                 'name'       => 'Monoton',
    & b! Z4 o! j9 L. J8 [
  32.                                 'fontFace'   => () [3 u. P6 M; X' h( Y
  33.                                         array (% r+ {# j6 c; s0 L' B
  34.                                                         'fontFamily' => 'Monoton',! _% J8 h' Q9 a9 H; D
  35.                                                         'fontStyle'  => 'normal',5 Z9 n) y" e, O
  36.                                                         'fontWeight' => '400',0 `7 T5 y5 Y' Y! x! I
  37.                                                         'src'        => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',
    6 r' K8 \6 V8 L, b* q7 t- b& q
  38.                                                         'preview'    => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'# z7 i; N) k7 U+ ^
  39.                                         ),
    ( \. M' c7 Y4 _1 j1 |; i
  40.                                 ),5 ]9 C$ k3 H3 A6 N' [# p$ e& K
  41.                         )# n7 S3 k' z8 b3 P- y
  42.                 ),; Z. t, q; V6 r  f
  43.                 'categories' => [ 'display' ],4 p6 R+ x0 \/ e
  44.         ),
    - m/ R* y1 i7 G8 l5 W
  45.         array(( `* v& Z) W. K) h0 E
  46.                 'font_family_settings' => (
    ! R8 J, d6 N8 {3 _% B) |
  47.                         array (4 ]7 y( A7 b( Q2 R
  48.                                 'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
    $ z2 }& _9 R% h5 t
  49.                                 'slug'       => 'arial',9 @! W4 M4 L' P6 f$ @
  50.                                 'name'       => 'Arial',& D" o: N! b4 G- }6 p, q: N, k% i
  51.                         )$ J. u% m1 N. q6 `
  52.                 ),
    ' N0 e) A6 B& v, h+ {
  53.                 'categories' => [ 'sans-serif' ],
    2 v% E* R. e2 r: N1 T( G
  54.         ),. g  Q4 O1 t* }" x
  55. ];
    6 w& i) n3 S5 s+ ~; \- U
  56.         
    ' p, ~  ?+ \& L( c
  57. $categories = [
    0 z5 n  m0 O0 s3 [
  58.         array(
    / l7 u- Y5 o1 B* Z' N, M$ p: W0 P) z
  59.         'name' => _x( 'Display', 'Font category name' ),
    , F2 _# S% ]  R8 `" z
  60.                 'slug' => 'display',- H+ N) Q$ ~7 H: a+ M- `3 @
  61.         ),1 Q4 F  h, ~. R1 I/ c; h
  62.         array(7 m7 N- f1 h$ T  b4 D9 H6 E3 g
  63.                 'name' => _x( 'Sans Serif', 'Font category name' ),1 R5 C' W/ W! }" H
  64.                 'slug' => 'sans-serif',
    + U2 L4 P. ^( |+ D* [5 E
  65.         ),
    * x- i: j) K& J0 E
  66. ];
    - @3 _/ r' k! L
  67. $config = array (% o! y# S' a9 R3 \
  68.         'name'          => _x( 'My font collection', 'Font collection name' ),
    ; w/ @  P) p6 j! N  K
  69.         'description'   => _x(  'A collection of my favorite fonts.', 'Font collection description' ),( h* o' ^2 o0 o7 x+ H
  70.         'font_families' => $font_families,7 V$ V# U  k, \8 C6 C
  71.         'categories'    => $categories,
    ! J/ T; C6 m  X7 S
  72. );
    " K3 v: e7 Y) z7 m; X
  73. wp_register_font_collection ( 'my-font-collection', $config );
复制代码
请注意, Font Collection 数组的name和description字段必须是可翻译的,这可以通过将字符串包装在_x() 函数中来实现。字体系列名称通常不被翻译。有关更多信息和背景讨论,请参阅#60509
该字段的 JSON 格式font_families可以是本地路径或指向 JSON 文件的远程URL 。
1 e, t  g: n. F8 j1 _7 B
删除字体集
可以使用wp_unregister_font_collection()函数禁用字体集合。这是禁用默认字体集合的示例:
  1. add_action( 'init', function() {
    - p+ B0 s. F0 X7 J! ?: B8 @
  2.         wp_unregister_font_collection( 'default-font-collection' );/ _9 P- P! [, S+ a/ G. s
  3. } );
复制代码
有关更多信息,请参阅#57980
2 ~, L. }9 i1 f8 _0 g4 Y% ]1 j/ ~
安装和激活字体
字体定义基于theme.json 格式进行字体设置。将字体“安装”到网站会将集合中的 theme.json 格式设置保存到数据库中,因此可以为任何主题激活该字体。
当字体被“激活”时,主题的全局样式设置将被更新,以便包含该字体以及主题定义的字体,并且可以在全局样式和单个块的版式设置中使用。
切换到新主题时,需要重新激活已安装的字体,以更新该主题的站点全局样式设置。如果重置主题的全局样式,这将停用所有已安装的字体,但它们将保留在站点上,并且可以根据需要重新激活。
此外,字体库可用于停用主题中包含的字体(如果不需要),以提高网站的加载性能。

, N8 H/ T3 Q: r3 ^: M) A自定义字体上传目录
请注意,以下一些详细信息(例如函数名称)可能在 6.5 版本之前发生更改。有关更多信息,请参阅#60751和古腾堡问题#59699
默认情况下,字体将上传到该wp-content/fonts目录。但是,可以使用 font_dir 过滤器根据需要自定义该位置。对于不支持修改wp-content目录的安装,wp-content/uploads/fonts将用作后备目录。
可以使用 wp_get_font_dir()返回字体上传目录的位置。
下面的示例将字体目录更改为 WordPress “Uploads”目录(默认情况下为wp-content/uploads):
  1. function alter_wp_fonts_dir( $defaults ) {
    9 o  a- b- I/ ?) U6 _  L
  2.         $wp_upload_dir = wp_get_upload_dir();! B0 u2 M7 ]; y: m! o; B( D& o) g+ ^
  3.         $uploads_basedir = $wp_upload_dir['basedir'];( D, x- y/ q- S0 t6 H) ~
  4.         $uploads_baseurl = $wp_upload_dir['baseurl'];7 U  i+ |, x) R
  5.         $fonts_dir = $uploads_basedir . '/fonts';6 C9 S- }7 k0 r
  6.         // Generate the URL for the fonts directory from the font dir.
    4 e5 B' T& B) N5 R" \9 v& Z( Y) v
  7.         $fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );( ~+ [# ^5 }' D: }
  8.         $defaults['path'] = $fonts_dir;
    2 S- `! e; \, e
  9.         $defaults['url']  = $fonts_url;
      w% F# g  ?8 M
  10.         return $defaults;
    2 K/ u3 k% t% |1 k0 _0 i
  11. }
    ) W6 [! g( s3 ?) {5 n! s5 _* j$ B; V. S
  12. add_filter( 'font_dir', 'alter_wp_fonts_dir' );
复制代码
修改上传位置时,重要的是要确保所选位置存在并且设置了适当的读/写权限。
与wp-content/uploads目录一样,字体上传目录不会坚持 wp_is_file_mod_allowed/DISALLOW_FILE_MODS 以防止字体上传。
有关更多信息,请参阅#59417这篇文章

: O0 u2 o5 N4 e# p" ]# _如何禁用字体库
默认情况下可通过编辑器访问字体库。

2 W5 P: |: L; @  v1 u禁用用户界面
可以使用过滤器来禁用 UI 来自定义编辑器设置:
  1. function disable_font_library_ui( $editor_settings ) { ( t- I, n% A5 ^( C; {  R" y) _
  2.             $editor_settings['fontLibraryEnabled'] = false;4 |' E1 D- Z. X1 {6 D7 N
  3.             return $editor_settings;   f. F2 b. k5 u3 R
  4. }
    , |8 \+ y7 q0 v- _7 v! _4 s
  5. add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );
复制代码
禁用REST API
该unregister_post_type()函数可用于删除与字体库关联的帖子类型,并通过扩展 REST API:
  1. add_action( 'init', function() {
    & i9 [8 {& r1 \
  2.             unregister_post_type( 'wp_font_family' );
    7 Q0 |( C) h$ U+ z* s( n. B$ n2 s0 z+ W
  3.             unregister_post_type( 'wp_font_face' );) o; w$ ?, @" K: s0 X$ @) k
  4. } );
复制代码
这允许扩展程序禁用字体库,同时保留用于管理活动主题提供的字体的 UI。
有关更多信息,请参阅#55275#57818

0 r( e7 ?8 E4 A. F1 a8 c- K6 R  r; w新的 REST API
& N, K% G0 C3 J- O- c5 F+ a
字体库功能引入了三个新的 REST API 端点:
有关每个新端点的详细文档,请参阅REST API 手册#57616

" ?6 {$ V. O* _
4 f, x6 o& G0 N4 V
啊舒服sdf
目前尚无回复
添加一条新回复
您需要登录后才可以回帖 登录 | 立即注册

本节点积分规则
站点统计  ·  手机版  ·  小黑屋  ·  帮助  ·  Archiver  ·  手机版  ·  小黑屋  ·  127 人在线  最高记录 4233  ·  TOP
愿孤独的人都会唱歌,愿漂泊的人都有酒喝!
World is powered by solitude
GMT+8, 2026-7-21 02:25, Processed in 0.390209 second(s), 187 queries .

  Inspire by v2ex, Powered by Discuz! X3.5, Template by MeiMiaoShe.Com, © 2001-2025 Discuz! Team.