美妙社  ›  WordPress

WordPress 6.5 新功能:字体库 详解

DivivitYan懵逼 WP教程 2024-4-3 23:25:11507 次点击 阅读模式     
字体库 在 WordPress 6.5 中引入,允许用户直接在编辑器中管理字体。它附带了一组 API,允许开发人员控制、调整和禁用其行为。
& z, ?. H  W9 f, D  u1 b% ~* r5 @% k5 s* {
字体集
字体集是用户可以通过编辑器安装的字体系列定义的列表。字体系列定义是theme.json格式中的一个fontFamily项。默认情况下,WordPress 6.5 允许用户选择加入 Google 字体集合列表。为了让网站保持GDPR合规性,安装 Google 字体会将文件下载到 WordPress 服务器。
注册字体集合后,它将出现在编辑器的字体库UI中。从这里,用户可以安装并激活该集合中的字体。
wp-65-font-library.jpg
/ H! |7 ?3 p! Z$ B9 b3 F' D+ }
, I! o: u( V2 g+ O, E0 T

$ k; U% o3 i' T- ^8 J- H+ R; Q1 r添加字体集
可以使用wp_register_font_collection()函数添加新的字体集合。这可以通过以PHP或JSON格式提供字体系列及其字体列表作为字体集合数组的一部分来完成。
以下是在 PHP 中添加字体集合的示例:
  1. $font_families = [3 p: G) X" h% y, O
  2.         array(
    8 V6 \2 Q, d  i' A: w: k/ ^
  3.                 'font_family_settings' => (
    8 U( t+ l, I0 ^9 u6 S. `
  4.                         array (
    4 f( y- {7 F# \6 a5 C2 A$ {
  5.                                 'fontFamily' => 'Open Sans, sans-serif'," t4 L2 D% |9 G7 S# B7 R+ A
  6.                                 'slug'       => 'open-sans',
    : ~, n# h) R, `+ G/ I9 g. J* _8 v1 d
  7.                                 'name'       => 'Open Sans',. b6 Y- N$ h: F7 z& e% u' V
  8.                                 'fontFace'   => ($ }( K$ T2 W8 s* z8 |) L5 }
  9.                                         array (! ?. ~5 C" e  `( Z! T' E% _) x1 n* R
  10.                                                         'fontFamily' => 'Open Sans',: v8 \0 O0 E: [; B+ p) t3 U
  11.                                                         'fontStyle'  => 'normal',
    # Y1 f# `' K) e+ {. j' E
  12.                                                         'fontWeight' => '300',
    3 R' Q6 v) w+ y5 W( B
  13.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'
    ! f9 o* l0 i3 r- U- n' ~
  14.                                         ),
    8 q8 b$ u- v( n- `& {
  15.                                         array (" n" u( e$ A% \: N3 H
  16.                                                         'fontFamily' => 'Open Sans',
    5 r5 S( R) x" X" e
  17.                                                         'fontStyle'  => 'italic',7 r& H6 s( l2 j: I: M: u
  18.                                                         'fontWeight' => '400',
    - a- D) P* p. o: h
  19.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2': y) x/ }7 X9 W. F
  20.                                         ),
    + S  b4 K* O% g- c$ o
  21.                                 ),$ g5 G- j$ s' I: ?) e
  22.                         ),
    * S+ u1 z% x# E0 y6 ?5 `
  23.                 ),0 Z8 J# Q$ v% P& ?) [
  24.                 'categories' => [ 'sans-serif' ],
    ( ~! y& W4 k$ N# x7 V, c* l) V# m
  25.         ),
    . `! M% p6 W, d. x/ k
  26.         array(
    0 P0 k: U; g. V  u; {3 x
  27.                 'font_family_settings' => (
    ( g- L- _: K7 i2 B
  28.                         array (
    + M( l) S$ Y! w5 [. z
  29.                                 'fontFamily' => 'Monoton, system-ui',8 \$ g! n: G7 Y" ~' G9 |% R
  30.                                 'slug'       => 'monoton',9 h6 M- l; i9 X% s
  31.                                 'name'       => 'Monoton',( m# g8 t% g) Q7 _% e
  32.                                 'fontFace'   => (
    : B9 i9 X+ W9 }' W* @2 @; m9 c; K
  33.                                         array (
      _! z: B. j3 J  t" }
  34.                                                         'fontFamily' => 'Monoton',/ x& d9 C- Y: I" o
  35.                                                         'fontStyle'  => 'normal',0 |2 E& w# W. |+ D; y" Z/ v7 j3 c
  36.                                                         'fontWeight' => '400',/ s$ J9 N  o* p/ d
  37.                                                         'src'        => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',
    5 L6 y5 b# f! u  w* Q' N) Z3 B
  38.                                                         'preview'    => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'+ t3 J9 |( H8 @- J
  39.                                         ),  W; u4 y1 V5 w$ O
  40.                                 ),
      j0 \4 q) ]1 Y% @
  41.                         )3 k& H/ ?2 {& a" h
  42.                 ),
    * |- h9 ?4 L3 U* p0 t7 b
  43.                 'categories' => [ 'display' ],' R. M5 Z  G, ^" t
  44.         ),/ U0 L* X+ s8 ~8 d: N4 K+ b) Y, Y
  45.         array(
    - u: p5 ~! @- E
  46.                 'font_family_settings' => (
    0 k  N2 c1 s% {' @/ h" G! x  A% [
  47.                         array (
    9 q1 R% i. ?$ B- m6 v/ u8 b
  48.                                 'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
    6 {0 n/ _$ C% E; ^6 ]
  49.                                 'slug'       => 'arial',' O. Y, w8 J, Y" K6 [/ K
  50.                                 'name'       => 'Arial',# Q& m) w  U# t( B) o) ~
  51.                         )
    ) D% m. N  U" v& e
  52.                 ),
    : w2 |- f/ x( |3 _6 j# X8 v, `
  53.                 'categories' => [ 'sans-serif' ],* \5 D# C7 \. L9 K" D1 |
  54.         ),* A8 v' x8 B% `, x7 V: q' t3 {
  55. ];
    $ D3 m: q6 m+ ^2 g* F) M7 E/ r: G/ o
  56.         , G) q3 `" {7 n8 h
  57. $categories = [( V# k5 \/ t' L  p" G8 G
  58.         array(
    ( E2 t4 n- V  |  Q$ Y& \, L
  59.         'name' => _x( 'Display', 'Font category name' ),
    ( w2 R7 L# I7 F# D- R, c
  60.                 'slug' => 'display',
    $ q9 r8 V3 b, f8 o% K" Q
  61.         ),
    2 h! y% [# w+ t" w* j' s
  62.         array(* S: g+ C3 s& h  q
  63.                 'name' => _x( 'Sans Serif', 'Font category name' ),% p; n& Z; ?/ R: l# Q
  64.                 'slug' => 'sans-serif',# g3 @  F) B. ~* Z/ g
  65.         ),; {9 |/ n: f/ a4 \$ Z$ z- s
  66. ];* z2 r7 D+ V, V( N9 K7 w$ R) \; b
  67. $config = array (
    0 }' z/ k! E, `: v" C
  68.         'name'          => _x( 'My font collection', 'Font collection name' ),3 p$ I6 X+ ]) F' e8 q
  69.         'description'   => _x(  'A collection of my favorite fonts.', 'Font collection description' ),, h% G) m; q$ g3 \2 h( R
  70.         'font_families' => $font_families,' z6 h' [! q+ U. \- [4 l; C
  71.         'categories'    => $categories,
    . x9 _, V) f9 X: e
  72. );( b: |+ f7 D2 j1 D
  73. wp_register_font_collection ( 'my-font-collection', $config );
复制代码
请注意, Font Collection 数组的name和description字段必须是可翻译的,这可以通过将字符串包装在_x() 函数中来实现。字体系列名称通常不被翻译。有关更多信息和背景讨论,请参阅#60509
该字段的 JSON 格式font_families可以是本地路径或指向 JSON 文件的远程URL 。
9 Y( G) `* u' ^: g' p" k
删除字体集
可以使用wp_unregister_font_collection()函数禁用字体集合。这是禁用默认字体集合的示例:
  1. add_action( 'init', function() {- J" A& H7 K. o6 D, s" E. U8 v9 X- u
  2.         wp_unregister_font_collection( 'default-font-collection' );
    + I' R4 f. g1 W$ q1 {& v
  3. } );
复制代码
有关更多信息,请参阅#57980

$ W- W2 w; j+ T' n0 t% B安装和激活字体
字体定义基于theme.json 格式进行字体设置。将字体“安装”到网站会将集合中的 theme.json 格式设置保存到数据库中,因此可以为任何主题激活该字体。
当字体被“激活”时,主题的全局样式设置将被更新,以便包含该字体以及主题定义的字体,并且可以在全局样式和单个块的版式设置中使用。
切换到新主题时,需要重新激活已安装的字体,以更新该主题的站点全局样式设置。如果重置主题的全局样式,这将停用所有已安装的字体,但它们将保留在站点上,并且可以根据需要重新激活。
此外,字体库可用于停用主题中包含的字体(如果不需要),以提高网站的加载性能。
3 r1 g# K) P: q  K1 A/ W& ?, Y
自定义字体上传目录
请注意,以下一些详细信息(例如函数名称)可能在 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 _( a0 V- F! t- g& O
  2.         $wp_upload_dir = wp_get_upload_dir();
    $ \8 p% s1 `. l. C0 y' C
  3.         $uploads_basedir = $wp_upload_dir['basedir'];. o/ l' H/ Q3 T9 Y. T5 _' C3 G. H# v
  4.         $uploads_baseurl = $wp_upload_dir['baseurl'];
    $ ]7 J- S- y* G, Q6 S, s
  5.         $fonts_dir = $uploads_basedir . '/fonts';- Q) p, X; t+ f- ~5 R3 {5 j
  6.         // Generate the URL for the fonts directory from the font dir./ i$ p9 i7 K8 `9 V* I
  7.         $fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );
      U2 k4 y; _" ~) Y* k1 g
  8.         $defaults['path'] = $fonts_dir;
    % R& o  b5 x! Z
  9.         $defaults['url']  = $fonts_url;
    ; L9 Q7 I& l0 T* _! k
  10.         return $defaults;" R- O( Z) N1 D6 D  c
  11. }
    * w3 @* J, E+ l- E* o5 ^
  12. add_filter( 'font_dir', 'alter_wp_fonts_dir' );
复制代码
修改上传位置时,重要的是要确保所选位置存在并且设置了适当的读/写权限。
与wp-content/uploads目录一样,字体上传目录不会坚持 wp_is_file_mod_allowed/DISALLOW_FILE_MODS 以防止字体上传。
有关更多信息,请参阅#59417这篇文章

) R+ y( S4 q6 ^$ p2 V如何禁用字体库
默认情况下可通过编辑器访问字体库。
7 E3 B9 c% p4 a% H; g) [. e
禁用用户界面
可以使用过滤器来禁用 UI 来自定义编辑器设置:
  1. function disable_font_library_ui( $editor_settings ) {
    5 P/ `" t( V9 P3 n% q5 M0 l
  2.             $editor_settings['fontLibraryEnabled'] = false;
      \5 R2 _+ i, f7 d5 e. s! [
  3.             return $editor_settings; % x2 J! v, s, D$ c
  4. }
    6 |8 p2 {) v* ^/ {$ {% j
  5. add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );
复制代码
禁用REST API
该unregister_post_type()函数可用于删除与字体库关联的帖子类型,并通过扩展 REST API:
  1. add_action( 'init', function() {; k& a5 {, W" t2 @" S
  2.             unregister_post_type( 'wp_font_family' );
    3 [1 c/ |. k$ i7 k& H" U8 O
  3.             unregister_post_type( 'wp_font_face' );
    " L0 j1 e' h, f: q. W0 r
  4. } );
复制代码
这允许扩展程序禁用字体库,同时保留用于管理活动主题提供的字体的 UI。
有关更多信息,请参阅#55275#57818
0 ^* g+ V6 Y+ \# [
新的 REST API3 t# W. f+ M1 z! x4 R) K
字体库功能引入了三个新的 REST API 端点:
有关每个新端点的详细文档,请参阅REST API 手册#57616

% d2 |7 A' B/ ?$ Z- N) m7 y( d* W& r$ `0 d* N# S* x
啊舒服sdf
目前尚无回复
添加一条新回复
您需要登录后才可以回帖 登录 | 立即注册

本节点积分规则
站点统计  ·  手机版  ·  小黑屋  ·  帮助  ·  Archiver  ·  手机版  ·  小黑屋  ·  22 人在线  最高记录 291  ·  TOP
愿孤独的人都会唱歌,愿漂泊的人都有酒喝!
World is powered by solitude
GMT+8, 2024-7-21 06:46, Processed in 0.339406 second(s), 165 queries , APCu On.

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