WordPress 6.5 新功能字体库是什么怎么用?

2024-03-1714:23:14网站管理维护Comments495 views字数 3949阅读模式

字体集

字体集是用户可以通过编辑器安装的字体系列定义的列表。字体系列定义是theme.json格式中的一个fontFamily项。默认情况下,WordPress 6.5 允许用户选择加入 Google 字体集合列表。为了让网站保持GDPR合规性,安装 Google 字体会将文件下载到 WordPress 服务器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

注册字体集合后,它将出现在编辑器的字体库UI中。从这里,用户可以安装并激活该集合中的字体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

WordPress 6.5 新功能字体库是什么怎么用?

添加字体集

可以使用wp_register_font_collection()函数添加新的字体集合。这可以通过以PHP或JSON格式提供字体系列及其字体列表作为字体集合数组的一部分来完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

以下是在 PHP 中添加字体集合的示例:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

  1. $font_families = [
  2. array(
  3. 'font_family_settings' => (
  4. array (
  5. 'fontFamily' => 'Open Sans, sans-serif',
  6. 'slug' => 'open-sans',
  7. 'name' => 'Open Sans',
  8. 'fontFace' => (
  9. array (
  10. 'fontFamily' => 'Open Sans',
  11. 'fontStyle' => 'normal',
  12. 'fontWeight' => '300',
  13. 'src' => 'https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2'
  14. ),
  15. array (
  16. 'fontFamily' => 'Open Sans',
  17. 'fontStyle' => 'italic',
  18. 'fontWeight' => '400',
  19. 'src' => 'https://fonts.gstatic.com/s/opensans/v40/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVIUwaERZjA.woff2'
  20. ),
  21. ),
  22. ),
  23. ),
  24. 'categories' => [ 'sans-serif' ],
  25. ),
  26. array(
  27. 'font_family_settings' => (
  28. array (
  29. 'fontFamily' => 'Monoton, system-ui',
  30. 'slug' => 'monoton',
  31. 'name' => 'Monoton',
  32. 'fontFace' => (
  33. array (
  34. 'fontFamily' => 'Monoton',
  35. 'fontStyle' => 'normal',
  36. 'fontWeight' => '400',
  37. 'src' => 'https://fonts.gstatic.com/s/monoton/v19/5h1aiZUrOngCibe4fkPBQ2S7FU8.woff2',
  38. 'preview' => 'https://s.w.org/images/fonts/17.7/previews/monoton/monoton-400-normal.svg'
  39. ),
  40. ),
  41. )
  42. ),
  43. 'categories' => [ 'display' ],
  44. ),
  45. array(
  46. 'font_family_settings' => (
  47. array (
  48. 'fontFamily' => 'Arial, Helvetica, Tahoma, Geneva, sans-serif',
  49. 'slug' => 'arial',
  50. 'name' => 'Arial',
  51. )
  52. ),
  53. 'categories' => [ 'sans-serif' ],
  54. ),
  55. ];
  56. $categories = [
  57. array(
  58. 'name' => _x( 'Display', 'Font category name' ),
  59. 'slug' => 'display',
  60. ),
  61. array(
  62. 'name' => _x( 'Sans Serif', 'Font category name' ),
  63. 'slug' => 'sans-serif',
  64. ),
  65. ];
  66. $config = array (
  67. 'name' => _x( 'My font collection', 'Font collection name' ),
  68. 'description' => _x( 'A collection of my favorite fonts.', 'Font collection description' ),
  69. 'font_families' => $font_families,
  70. 'categories' => $categories,
  71. );
  72. wp_register_font_collection ( 'my-font-collection', $config );

请注意, Font Collection 数组的namedescription字段必须是可翻译的,这可以通过将字符串包装在_x() 函数中来实现。字体系列名称通常不被翻译。有关更多信息和背景讨论,请参阅#60509文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

该字段的 JSON 格式font_families可以是本地路径或指向 JSON 文件的远程URL 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

删除字体集

可以使用wp_unregister_font_collection()函数禁用字体集合。这是禁用默认字体集合的示例:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

  1. add_action( 'init', function() {
  2. wp_unregister_font_collection( 'default-font-collection' );
  3. } );

有关更多信息,请参阅#57980文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

安装和激活字体

字体定义基于theme.json 格式进行字体设置。将字体“安装”到网站会将集合中的 theme.json 格式设置保存到数据库中,因此可以为任何主题激活该字体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

当字体被“激活”时,主题的全局样式设置将被更新,以便包含该字体以及主题定义的字体,并且可以在全局样式和单个块的版式设置中使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

切换到新主题时,需要重新激活已安装的字体,以更新该主题的站点全局样式设置。如果重置主题的全局样式,这将停用所有已安装的字体,但它们将保留在站点上,并且可以根据需要重新激活。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

此外,字体库可用于停用主题中包含的字体(如果不需要),以提高网站的加载性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

自定义字体上传目录

请注意,以下一些详细信息(例如函数名称)可能在 6.5 版本之前发生更改。有关更多信息,请参阅#60751和古腾堡问题#59699。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

默认情况下,字体将上传到该wp-content/fonts目录。但是,可以使用 font_dir 过滤器根据需要自定义该位置。对于不支持修改wp-content目录的安装,wp-content/uploads/fonts将用作后备目录。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

可以使用 wp_get_font_dir()返回字体上传目录的位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

下面的示例将字体目录更改为 WordPress “Uploads”目录(默认情况下为wp-content/uploads):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

  1. function alter_wp_fonts_dir( $defaults ) {
  2. $wp_upload_dir = wp_get_upload_dir();
  3. $uploads_basedir = $wp_upload_dir['basedir'];
  4. $uploads_baseurl = $wp_upload_dir['baseurl'];
  5. $fonts_dir = $uploads_basedir . '/fonts';
  6. // Generate the URL for the fonts directory from the font dir.
  7. $fonts_url = str_replace( $uploads_basedir, $uploads_baseurl, $fonts_dir );
  8. $defaults['path'] = $fonts_dir;
  9. $defaults['url'] = $fonts_url;
  10. return $defaults;
  11. }
  12. add_filter( 'font_dir', 'alter_wp_fonts_dir' );

修改上传位置时,重要的是要确保所选位置存在并且设置了适当的读/写权限。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

wp-content/uploads目录一样,字体上传目录不会坚持 wp_is_file_mod_allowed/DISALLOW_FILE_MODS 以防止字体上传。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

有关更多信息,请参阅#59417和这篇文章文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

如何禁用字体库

默认情况下可通过编辑器访问字体库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

禁用用户界面

可以使用过滤器来禁用 UI 来自定义编辑器设置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

  1. function disable_font_library_ui( $editor_settings ) {
  2. $editor_settings['fontLibraryEnabled'] = false;
  3. return $editor_settings;
  4. }
  5. add_filter( 'block_editor_settings_all', 'disable_font_library_ui' );

禁用REST API

unregister_post_type()函数可用于删除与字体库关联的帖子类型,并通过扩展 REST API:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

  1. add_action( 'init', function() {
  2. unregister_post_type( 'wp_font_family' );
  3. unregister_post_type( 'wp_font_face' );
  4. } );

这允许扩展程序禁用字体库,同时保留用于管理活动主题提供的字体的 UI。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

有关更多信息,请参阅#55275和#57818。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

新的 REST API

字体库功能引入了三个新的 REST API 端点:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html

  • wp/v2/font-collections – 字体系列预定义列表(即“集合”)的端点。
  • wp/v2/font-families – 父字体系列的端点,通常(但并非总是)包含一种或多种字体(即单个字体)。
  • wp/v2/font-families/<id>/font-faces – 系列中各个字体的端点。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/wg/62319.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/wg/62319.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定