美妙社  ›  WordPress

WordPress 6.5 新功能:字体库 详解

DivivitYan懵逼VIP2 WP教程 2024-4-3 23:25:111.7K 次点击 阅读模式     
字体库 在 WordPress 6.5 中引入,允许用户直接在编辑器中管理字体。它附带了一组 API,允许开发人员控制、调整和禁用其行为。
* [, w7 ~" i$ Z  d( ?" e, X" n4 Q
" C; S  r2 z: S# a' ]& m1 F2 ~- r字体集
字体集是用户可以通过编辑器安装的字体系列定义的列表。字体系列定义是theme.json格式中的一个fontFamily项。默认情况下,WordPress 6.5 允许用户选择加入 Google 字体集合列表。为了让网站保持GDPR合规性,安装 Google 字体会将文件下载到 WordPress 服务器。
注册字体集合后,它将出现在编辑器的字体库UI中。从这里,用户可以安装并激活该集合中的字体。
wp-65-font-library.jpg
+ \) j% v' z: F8 H- L9 B+ |$ x, f9 {  E
1 G. T6 ^* c( u5 C0 p7 O
添加字体集
可以使用wp_register_font_collection()函数添加新的字体集合。这可以通过以PHP或JSON格式提供字体系列及其字体列表作为字体集合数组的一部分来完成。
以下是在 PHP 中添加字体集合的示例:
  1. $font_families = [
    ( W" {& f( l8 \; O
  2.         array(
    ' N' E! m& B+ Y- y" w5 g/ y
  3.                 'font_family_settings' => (
    * ]4 ^2 h3 d, K% X6 k
  4.                         array (
    ; e3 l+ Y% F+ b' g# `5 {9 x
  5.                                 'fontFamily' => 'Open Sans, sans-serif',: A7 V0 \+ e5 i$ D, p
  6.                                 'slug'       => 'open-sans',: }: A, G6 a/ m) h. X9 ^* c2 L- h4 z+ g
  7.                                 'name'       => 'Open Sans',& ^, z: x$ Y( c7 k
  8.                                 'fontFace'   => (
    ( C6 _: {3 P- m* B5 t. N% ]
  9.                                         array (, j  U( I! j) H+ n
  10.                                                         'fontFamily' => 'Open Sans',
    8 B/ n, R' l: B
  11.                                                         'fontStyle'  => 'normal',
    , p  [5 J8 _4 G' w$ i
  12.                                                         'fontWeight' => '300',
    4 w" }- m. T4 u" I
  13.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'
    " _% q5 v% q7 V0 g2 r
  14.                                         ),
    ! ~! H& b& r/ g' ^1 `6 n) w
  15.                                         array () M2 _' B: I2 o, G9 K; E& g8 G
  16.                                                         'fontFamily' => 'Open Sans',
    ! Y8 {1 J# G. T% O8 P$ R" \$ P
  17.                                                         'fontStyle'  => 'italic',  V6 T" a1 J+ h
  18.                                                         'fontWeight' => '400',
    ; ~, ?9 }7 x7 P, W. Q
  19.                                                         'src'        => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'
    ( H- p" ?* {0 D8 ?& _! X* z
  20.                                         ),
    7 C# e" }' s! A- f% s
  21.                                 ),
    2 r) ~, i" ^. j8 Z) y8 p  h* Q& E
  22.                         ),
    7 K( i2 K3 u5 S2 p7 i
  23.                 ),  z* @9 A8 {& L; D$ U# ^
  24.                 'categories' => [ 'sans-serif' ],3 z! N! Z1 }3 Q+ W) A8 P$ A
  25.         ),5 ~. ?( E. @& n) p
  26.         array(
    / y' t) ~. r2 `6 _! F
  27.                 'font_family_settings' => (1 K1 i! z9 S. h, F- Z7 O" x
  28.                         array (
    4 O- C/ f6 V  q- s. T1 {' J) J
  29.                                 'fontFamily' => 'Monoton, system-ui',& u( \0 V- I9 g* B+ ?1 W
  30.                                 'slug'       => 'monoton',
    " }4 N, O! S0 X' y8 ?4 Q5 `
  31.                                 'name'       => 'Monoton',
      u% s! S/ r8 f4 o6 y
  32.                                 'fontFace'   => (
    1 H: R0 i  ]) e8 s: w
  33.                                         array (
    & g( M; D7 [- y
  34.                                                         'fontFamily' => 'Monoton',3 k0 q2 g% s- c2 b1 L; ~. F
  35.                                                         'fontStyle'  => 'normal',
    2 ?3 x. g* N* t: A  `
  36.                                                         'fontWeight' => '400',
    $ Q  v( t6 _! E" b) Q
  37.                                                         'src'        => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',$ A- u0 C# l& z
  38.                                                         'preview'    => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'
    0 p& K' z% h) B' f  F& T
  39.                                         ),$ M; U1 ^+ s) V0 r* ~8 M! d
  40.                                 ),
    - ]* a0 R' f/ x& D  ^3 p4 R
  41.                         )8 K5 T$ Z8 k7 W" v0 s: `/ W+ k
  42.                 ),+ Y5 b8 k$ m& u
  43.                 'categories' => [ 'display' ],- s3 O! h0 I! ^% O
  44.         ),
    2 K; j" }8 X, s1 n2 [  M! w: j6 C$ _
  45.         array(1 V6 J* e8 D& o/ A/ ~
  46.                 'font_family_settings' => (
    . _; N$ R: i1 Z/ K$ m: L) y
  47.                         array (7 ~% }- G- `: V- r* h: Z# O
  48.                                 'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',$ f, ?! C+ M( r7 o8 T, U8 V: K4 V
  49.                                 'slug'       => 'arial',
    6 W$ l, j, K" }6 @
  50.                                 'name'       => 'Arial',3 b( _  h) J0 o* {8 }, C
  51.                         )
    ) l' P% p1 I5 n- q2 z; F5 V
  52.                 ),
    ; [! a1 H: [# G3 W2 A
  53.                 'categories' => [ 'sans-serif' ],
    9 \8 P2 ?" y5 p
  54.         ),
    9 V% m+ u) p5 q2 |) P9 O
  55. ];  E8 X) q) m3 V" {
  56.         * j# e* |6 D6 k8 H( \
  57. $categories = [* y' r1 F" a; g/ G+ d
  58.         array(
    2 X3 n' o; B- T: F# E9 A
  59.         'name' => _x( 'Display', 'Font category name' ),
    ( r7 w9 B" m6 U$ g' q# Y
  60.                 'slug' => 'display',8 v5 [5 Q' s1 @) P: y& f9 ^( ?
  61.         ),6 b: J2 X5 M7 Q) U7 ~3 j
  62.         array(9 Z5 t/ ?# S0 y! M% n
  63.                 'name' => _x( 'Sans Serif', 'Font category name' ),* w; G" x, T  h
  64.                 'slug' => 'sans-serif',5 V$ Q/ x: o' z0 E1 M
  65.         ),% |. I4 @4 _' d3 E# U) R
  66. ];
    ( W/ l( N5 Q" e
  67. $config = array (  a) r0 R1 L3 F( K1 E) B9 Z! N
  68.         'name'          => _x( 'My font collection', 'Font collection name' ),
    4 d2 F! [* q5 M2 |0 L4 G& b" b. w
  69.         'description'   => _x(  'A collection of my favorite fonts.', 'Font collection description' ),
    # `; y. `9 X# }
  70.         'font_families' => $font_families,. Z* a" {' E+ C8 b. t3 P
  71.         'categories'    => $categories,
    - V. a) I6 h( i& i- V
  72. );. i2 O/ s# c: _/ U( I5 V! h# P
  73. wp_register_font_collection ( 'my-font-collection', $config );
复制代码
请注意, Font Collection 数组的name和description字段必须是可翻译的,这可以通过将字符串包装在_x() 函数中来实现。字体系列名称通常不被翻译。有关更多信息和背景讨论,请参阅#60509
该字段的 JSON 格式font_families可以是本地路径或指向 JSON 文件的远程URL 。
' p- w9 O, A8 p! a8 {! U. f+ k' R
删除字体集
可以使用wp_unregister_font_collection()函数禁用字体集合。这是禁用默认字体集合的示例:
  1. add_action( 'init', function() {% h0 k& O2 ~- n. G( _/ V
  2.         wp_unregister_font_collection( 'default-font-collection' );8 P- C9 H+ B4 z# d3 F
  3. } );
复制代码
有关更多信息,请参阅#57980
$ Y5 O; Z# O) G
安装和激活字体
字体定义基于theme.json 格式进行字体设置。将字体“安装”到网站会将集合中的 theme.json 格式设置保存到数据库中,因此可以为任何主题激活该字体。
当字体被“激活”时,主题的全局样式设置将被更新,以便包含该字体以及主题定义的字体,并且可以在全局样式和单个块的版式设置中使用。
切换到新主题时,需要重新激活已安装的字体,以更新该主题的站点全局样式设置。如果重置主题的全局样式,这将停用所有已安装的字体,但它们将保留在站点上,并且可以根据需要重新激活。
此外,字体库可用于停用主题中包含的字体(如果不需要),以提高网站的加载性能。
' r& H0 _/ z1 I6 `: w
自定义字体上传目录
请注意,以下一些详细信息(例如函数名称)可能在 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 ) {
    " o6 ^* Q9 x0 C! g; u& D
  2.         $wp_upload_dir = wp_get_upload_dir();* b3 p/ U3 m! H+ E/ J9 a
  3.         $uploads_basedir = $wp_upload_dir['basedir'];
    5 p  K9 d2 o, f( K3 J) x
  4.         $uploads_baseurl = $wp_upload_dir['baseurl'];
    7 a/ T) i- d8 n1 A- }6 K" p
  5.         $fonts_dir = $uploads_basedir . '/fonts';% W5 |$ m5 C) D- X0 n
  6.         // Generate the URL for the fonts directory from the font dir., a" C) D% {5 }9 q7 E" w
  7.         $fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );8 o& G! y" e2 S: B% x7 s: }
  8.         $defaults['path'] = $fonts_dir;: `" t+ h( x0 I, E- v9 a
  9.         $defaults['url']  = $fonts_url;
    & O; v. y, N+ l. M
  10.         return $defaults;+ v& Y5 o' Q; z
  11. }
    : w5 |0 G& n0 b+ K5 D7 N  V
  12. add_filter( 'font_dir', 'alter_wp_fonts_dir' );
复制代码
修改上传位置时,重要的是要确保所选位置存在并且设置了适当的读/写权限。
与wp-content/uploads目录一样,字体上传目录不会坚持 wp_is_file_mod_allowed/DISALLOW_FILE_MODS 以防止字体上传。
有关更多信息,请参阅#59417这篇文章
3 x& \2 K" Q0 w) h  S% ?4 k
如何禁用字体库
默认情况下可通过编辑器访问字体库。

2 k! g8 l- y; s3 f禁用用户界面
可以使用过滤器来禁用 UI 来自定义编辑器设置:
  1. function disable_font_library_ui( $editor_settings ) {
    + G9 ]6 k! i! j
  2.             $editor_settings['fontLibraryEnabled'] = false;$ B; T  R9 k6 O4 O+ X6 D* |
  3.             return $editor_settings;   h9 O2 L$ a, R, ~
  4. }6 ^, W9 L6 `# r: ^' l$ w
  5. add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );
复制代码
禁用REST API
该unregister_post_type()函数可用于删除与字体库关联的帖子类型,并通过扩展 REST API:
  1. add_action( 'init', function() {
    # I$ B* |" v  V' X9 A
  2.             unregister_post_type( 'wp_font_family' );# B* j2 |% j0 }8 S
  3.             unregister_post_type( 'wp_font_face' );
    3 T! k9 i$ O$ ?) H& I" `
  4. } );
复制代码
这允许扩展程序禁用字体库,同时保留用于管理活动主题提供的字体的 UI。
有关更多信息,请参阅#55275#57818
- V- V2 N$ V9 d) W
新的 REST API
& i* L+ E! c* [  B. M) i
字体库功能引入了三个新的 REST API 端点:
有关每个新端点的详细文档,请参阅REST API 手册#57616

5 I/ A. J3 N, }1 z# f# [
# H  }* W' l( A5 B  Z7 r+ {1 r+ ?& V
啊舒服sdf
目前尚无回复
添加一条新回复
您需要登录后才可以回帖 登录 | 立即注册

本节点积分规则
站点统计  ·  手机版  ·  小黑屋  ·  帮助  ·  Archiver  ·  手机版  ·  小黑屋  ·  40 人在线  最高记录 513  ·  TOP
愿孤独的人都会唱歌,愿漂泊的人都有酒喝!
World is powered by solitude
GMT+8, 2024-11-21 15:41, Processed in 0.426588 second(s), 186 queries .

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