美妙社  ›  WordPress

WordPress 6.5 新功能:字体库 详解

DivivitYan懵逼VIP6 WP教程 2024-4-3 23:25:115K 次点击 阅读模式     
字体库 在 WordPress 6.5 中引入,允许用户直接在编辑器中管理字体。它附带了一组 API,允许开发人员控制、调整和禁用其行为。9 b4 G+ U: E5 Y" D( ?" }

- K2 J! T8 H( ]0 k3 P. V$ \2 h字体集
字体集是用户可以通过编辑器安装的字体系列定义的列表。字体系列定义是theme.json格式中的一个fontFamily项。默认情况下,WordPress 6.5 允许用户选择加入 Google 字体集合列表。为了让网站保持GDPR合规性,安装 Google 字体会将文件下载到 WordPress 服务器。
注册字体集合后,它将出现在编辑器的字体库UI中。从这里,用户可以安装并激活该集合中的字体。
wp-65-font-library.jpg
! E# j8 V: m- P/ Z( `( p5 F. `. v2 W6 O# F
* N) j+ N6 G6 Q4 A3 w' `* `* N, [
添加字体集
可以使用wp_register_font_collection()函数添加新的字体集合。这可以通过以PHP或JSON格式提供字体系列及其字体列表作为字体集合数组的一部分来完成。
以下是在 PHP 中添加字体集合的示例:
  1. $font_families = [) `9 |" o9 u9 M& N' U' S; r
  2.         array(& }& u, |. G# d) ^
  3.                 'font_family_settings' => (
    ; J' H) u) P. f0 U. q- k
  4.                         array (7 D) j# r. O4 T# U( J
  5.                                 'fontFamily' => 'Open Sans, sans-serif',
    ( H$ U& j+ u' v  n# y6 H: B6 A
  6.                                 'slug'       => 'open-sans',
    2 O6 d8 N# {% ~% W1 s
  7.                                 'name'       => 'Open Sans',
    . P/ C; v4 m2 _( h8 F# I0 \0 D8 F
  8.                                 'fontFace'   => (
    : E9 _1 m$ b& X+ ]" ?
  9.                                         array (( [# z2 T- \8 x) e- ^/ B, V
  10.                                                         'fontFamily' => 'Open Sans',3 r4 n' P5 w0 ^% S" _* `8 L
  11.                                                         'fontStyle'  => 'normal',2 f/ b4 g( \9 @# y) P3 X+ B) O. U
  12.                                                         'fontWeight' => '300',& z* l, b! P" _1 k, `0 v3 Z
  13.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'
    5 |+ @2 R( q! b2 a/ t; ]
  14.                                         ),
    5 ^2 o. @1 l& {+ Q- L9 X
  15.                                         array (
    " w- I/ Z0 ^2 P9 K; ]! a0 V
  16.                                                         'fontFamily' => 'Open Sans',
    8 }7 L! V; |1 E- p, |9 D
  17.                                                         'fontStyle'  => 'italic',2 ?& Q. Z; F1 H3 B7 t
  18.                                                         'fontWeight' => '400',
    1 K* m" d. j  `
  19.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'8 w) y$ _/ f  K; ^* `
  20.                                         ),. j9 H2 W0 f) a! W* v
  21.                                 ),3 |4 r4 C  e, T2 @. l& |& _
  22.                         ),
    8 w) k' `3 X) s3 C. E- G
  23.                 ),
    6 k/ S+ x* T* q4 S# g9 E
  24.                 'categories' => [ 'sans-serif' ],2 k- W' O) x) y6 S. G5 g% C
  25.         ),9 V+ J: M# d, j5 G, v. z' \
  26.         array(
    # _) H, x  ~: V4 Y* `% F8 Q
  27.                 'font_family_settings' => (5 h1 N4 u5 m" k9 J# n
  28.                         array (8 C/ k: Z$ H  D) J
  29.                                 'fontFamily' => 'Monoton, system-ui',/ O& E( V; p- B8 T& D* [! |2 M/ T
  30.                                 'slug'       => 'monoton',
    ) }. w; D8 e/ q+ `& v4 b
  31.                                 'name'       => 'Monoton',
    - S# U' P# P3 b( H* y3 L
  32.                                 'fontFace'   => (8 X1 I; }" `6 v( B+ Y
  33.                                         array (# `$ J( X1 e5 l- c. }
  34.                                                         'fontFamily' => 'Monoton',% i2 f  x2 V% x- d# ~- ?) ~. f
  35.                                                         'fontStyle'  => 'normal',6 n. ?: |6 |, f' q' `0 j
  36.                                                         'fontWeight' => '400',& n; v* W9 ?, f2 k+ l
  37.                                                         'src'        => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',0 w$ _* {1 e6 K  m
  38.                                                         'preview'    => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'7 `) Q- o1 x+ H, |* z# g3 T
  39.                                         ),- a% g" a+ b1 Y+ w. g/ O5 t  l
  40.                                 ),
    3 E  Z' t/ s% H8 ~6 J' ^
  41.                         )
    ' j" M& ?  J, J/ \. U: k5 E9 Y
  42.                 ),( ?$ t4 }) G# }) |, O( o
  43.                 'categories' => [ 'display' ],4 B: W: x% q  Y, G1 e
  44.         ),
    & ?4 C, C9 |# H7 d8 r
  45.         array(
    , ?0 l& Z# J$ k0 c6 m
  46.                 'font_family_settings' => (
    2 X5 z$ S2 C: z6 J* R
  47.                         array (0 a( H, H& W7 s2 X3 S  P
  48.                                 'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
    / c; Y6 I. `/ s; w8 H
  49.                                 'slug'       => 'arial',
    0 y# G* r+ ~' z4 @
  50.                                 'name'       => 'Arial',
    0 P) N5 _) p3 c5 B+ ]+ v6 t6 ^
  51.                         )
    # a  Q2 r: `* q1 `3 ~
  52.                 ),
    . v+ R4 X& Y; l6 p$ C: ~" `0 w
  53.                 'categories' => [ 'sans-serif' ],
    / O7 A2 d3 A, t) n
  54.         ),- S* z: P  H' A) Y
  55. ];
    3 z3 S5 H- |9 P
  56.         
    # `2 \2 h. c- F, Q/ b
  57. $categories = [
    8 u" |/ v% W$ |# J2 I
  58.         array(
    ! U$ V) z2 z+ J2 T$ q
  59.         'name' => _x( 'Display', 'Font category name' ),# {- F" C  L+ O0 {+ v
  60.                 'slug' => 'display',* a: \) ~! D* l7 w6 ?6 y
  61.         ),8 N* J& v# v% c4 E
  62.         array(
    3 U! O& V2 C& b; @' N5 D2 p+ N3 Y
  63.                 'name' => _x( 'Sans Serif', 'Font category name' ),4 E0 a( P$ f% ]
  64.                 'slug' => 'sans-serif',% G9 f: B  @9 N" A8 ?0 }3 ]
  65.         ),' w; ?3 G3 Y. m2 r" ]% @: e, |
  66. ];
      Y% |' P' j) i; N# ]0 V
  67. $config = array (
    + A% D! G. a6 @! c9 w6 f- G( o
  68.         'name'          => _x( 'My font collection', 'Font collection name' ),
    2 }6 {3 A# L3 t$ A5 @5 r
  69.         'description'   => _x(  'A collection of my favorite fonts.', 'Font collection description' ),
    9 [7 m4 G) C9 u: F( M  S' O! ~
  70.         'font_families' => $font_families,
    4 Y" K* _+ O$ q8 ^* @
  71.         'categories'    => $categories,
    ( c; w/ I% f( Q3 P6 u7 J
  72. );' ]. i) Y1 I, e; n$ m- p  _
  73. wp_register_font_collection ( 'my-font-collection', $config );
复制代码
请注意, Font Collection 数组的name和description字段必须是可翻译的,这可以通过将字符串包装在_x() 函数中来实现。字体系列名称通常不被翻译。有关更多信息和背景讨论,请参阅#60509
该字段的 JSON 格式font_families可以是本地路径或指向 JSON 文件的远程URL 。
, K% T; f+ i! I" i- z+ I9 a$ y, R0 M/ }
删除字体集
可以使用wp_unregister_font_collection()函数禁用字体集合。这是禁用默认字体集合的示例:
  1. add_action( 'init', function() {
    3 m' w* w" a, f: t# v; X. r
  2.         wp_unregister_font_collection( 'default-font-collection' );
    2 d- j7 l; ]- q: P! M) M* ~$ s
  3. } );
复制代码
有关更多信息,请参阅#57980
; T6 f7 d3 n4 E
安装和激活字体
字体定义基于theme.json 格式进行字体设置。将字体“安装”到网站会将集合中的 theme.json 格式设置保存到数据库中,因此可以为任何主题激活该字体。
当字体被“激活”时,主题的全局样式设置将被更新,以便包含该字体以及主题定义的字体,并且可以在全局样式和单个块的版式设置中使用。
切换到新主题时,需要重新激活已安装的字体,以更新该主题的站点全局样式设置。如果重置主题的全局样式,这将停用所有已安装的字体,但它们将保留在站点上,并且可以根据需要重新激活。
此外,字体库可用于停用主题中包含的字体(如果不需要),以提高网站的加载性能。

9 L7 S2 X2 O. j; K. H* M9 N自定义字体上传目录
请注意,以下一些详细信息(例如函数名称)可能在 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 ) {
    0 ^  S! M  F8 |+ M1 C2 E' Z
  2.         $wp_upload_dir = wp_get_upload_dir();
    0 k. H) O7 X" r( k- T) x
  3.         $uploads_basedir = $wp_upload_dir['basedir'];
    1 C! C6 Z" M* G$ l8 M8 c# m
  4.         $uploads_baseurl = $wp_upload_dir['baseurl'];4 ~" [2 ]) `* Z* _( V1 }, R
  5.         $fonts_dir = $uploads_basedir . '/fonts';
    ' J2 q3 y3 x# L1 V% E+ K5 y6 w' l
  6.         // Generate the URL for the fonts directory from the font dir.
    0 v# b9 Z" R6 B+ @+ [$ ]% l
  7.         $fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );% {3 F8 L3 C) ?  r; m' y1 u
  8.         $defaults['path'] = $fonts_dir;4 g7 V$ j6 n  P' K2 y2 J
  9.         $defaults['url']  = $fonts_url;: j/ L- L& c8 _# C$ k  W. r
  10.         return $defaults;8 D" X6 J& Y) p! p, X
  11. }
    $ s0 ?* r7 S, e( _
  12. add_filter( 'font_dir', 'alter_wp_fonts_dir' );
复制代码
修改上传位置时,重要的是要确保所选位置存在并且设置了适当的读/写权限。
与wp-content/uploads目录一样,字体上传目录不会坚持 wp_is_file_mod_allowed/DISALLOW_FILE_MODS 以防止字体上传。
有关更多信息,请参阅#59417这篇文章

, Y4 _+ l7 Q; k6 u0 B4 `2 ~如何禁用字体库
默认情况下可通过编辑器访问字体库。

- [1 ?* j; M$ A( V禁用用户界面
可以使用过滤器来禁用 UI 来自定义编辑器设置:
  1. function disable_font_library_ui( $editor_settings ) {
    . ]) q) |4 M/ \( ]
  2.             $editor_settings['fontLibraryEnabled'] = false;( M% I5 s7 k; h
  3.             return $editor_settings;   `% Z* R9 r- Z0 {  |# A
  4. }
    + h4 l, x9 H7 C! J& @2 ^5 E/ m
  5. add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );
复制代码
禁用REST API
该unregister_post_type()函数可用于删除与字体库关联的帖子类型,并通过扩展 REST API:
  1. add_action( 'init', function() {
    4 q* g) T# ~' i/ @+ a' d' A
  2.             unregister_post_type( 'wp_font_family' );
    / c: ?; p8 ]4 K* ?1 p
  3.             unregister_post_type( 'wp_font_face' );
    8 K9 ?- _) m6 k$ w
  4. } );
复制代码
这允许扩展程序禁用字体库,同时保留用于管理活动主题提供的字体的 UI。
有关更多信息,请参阅#55275#57818

% g/ [0 Z/ N, C/ x0 z6 g新的 REST API
8 `/ |* z/ Z5 b" B
字体库功能引入了三个新的 REST API 端点:
有关每个新端点的详细文档,请参阅REST API 手册#57616

; ^! y* G: [6 J) [
7 Z% x" B+ \2 _1 A& w
啊舒服sdf
目前尚无回复
添加一条新回复
您需要登录后才可以回帖 登录 | 立即注册

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

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