{"id":2244,"date":"2025-06-10T23:40:52","date_gmt":"2025-06-10T15:40:52","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2244.html"},"modified":"2025-06-10T23:40:52","modified_gmt":"2025-06-10T15:40:52","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%8a%e6%89%98%e7%ae%a1%e6%9c%ac%e5%9c%b0%e5%ad%97%e4%bd%93%e4%bb%a5%e5%ae%9e%e7%8e%b0%e7%bd%91%e7%ab%99%e6%9b%b4%e5%bf%ab%e5%8a%a0%e8%bd%bd","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2244.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e0a\u6258\u7ba1\u672c\u5730\u5b57\u4f53\u4ee5\u5b9e\u73b0\u7f51\u7ad9\u66f4\u5feb\u52a0\u8f7d"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

要在 WordPress 网站上托管本地字体以优化网站的加载速度，你需要遵循以下步骤：<\/p>\n

    \n
  1. \n

    选择合适的字体文件<\/strong>：首先，确保你有可用的本地字体文件。这些文件通常以 .ttf<\/code>、.woff<\/code> 或 .woff2<\/code> 格式存在。<\/p>\n<\/li>\n

  2. \n

    创建一个字体目录<\/strong>：在你的 WordPress 项目中创建一个新的子目录来存放这些字体文件。例如，在 wp-content\/themes\/your-theme\/fonts<\/code> 目录下新建一个名为 custom-fonts<\/code> 的子目录。<\/p>\n<\/li>\n

  3. \n

    上传字体文件到服务器<\/strong>：将你的字体文件上传到你选择的服务器位置。你可以通过 FTP 客户端（如 FileZilla）或直接访问你的域名的根目录来完成这个操作。<\/p>\n<\/li>\n

  4. \n

    添加字体到 CSS 文件<\/strong>：在你的 WordPress 主题的 style.css<\/code> 文件中，找到并修改以下行：<\/p>\n

    @font-face {\n   font-family: 'CustomFont';\n   src: url('\/fonts\/custom-fonts\/CustomFont.ttf') format('truetype');\n}<\/code><\/pre>\n
    将路径 \/fonts\/custom-fonts\/CustomFont.ttf<\/code> 替换为你的实际路径。<\/p>\n<\/li>\n
  5. \n
    测试字体显示<\/strong>：保存更改后，刷新浏览器页面，检查字体是否正确显示。<\/p>\n<\/li>\n
  6. \n
    优化字体文件大小<\/strong>：为了进一步提高网站加载速度，可以考虑对字体文件进行压缩和优化。使用在线工具（如 Font Squirrel Web Fonts Converter 或 Google Web Fonts Editor）来处理这些文件。<\/p>\n<\/li>\n
  7. \n
    使用 CDN<\/strong>：最后，如果可能的话，考虑使用 Content Delivery Network (CDN) 来托管字体文件，这样可以减少用户请求数据的距离，从而加快加载时间。<\/p>\n<\/li>\n<\/ol>\n
    示例代码<\/h3>\n
    假设你已经完成了上述步骤，并且你的字体文件位于 wp-content\/themes\/your-theme\/fonts\/custom-fonts<\/code> 目录下的 Roboto-Regular.ttf<\/code> 文件中。你的 style.css<\/code> 文件中的部分代码如下：<\/p>\n
    @font-face {\n    font-family: 'Roboto';\n    src: local('Roboto'), url(\/fonts\/custom-fonts\/Roboto-Regular.ttf) format('truetype');\n}<\/code><\/pre>\n
    这将会在你的 WordPress 网站上使用名为 “Roboto” 的字体。<\/p>\n
    使用步骤及效果<\/h3>\n
      \n
    • \n
      第一步<\/strong>：创建 fonts<\/code> 子目录。<\/p>\n
        \n
      • 在主题的根目录中运行 mkdir fonts<\/code> 命令。<\/li>\n<\/ul>\n<\/li>\n
      • \n
        第二步<\/strong>：将字体文件上传到 fonts<\/code> 子目录。<\/p>\n
          \n
        • 上传完成后，确认文件已成功放置在指定位置。<\/li>\n<\/ul>\n<\/li>\n
        • \n
          第三步<\/strong>：打开 style.css<\/code> 文件，并插入字体定义。<\/p>\n
            \n
          • 编辑 style.css<\/code> 文件，添加以下代码：<\/li>\n<\/ul>\n
            @font-face {\n    font-family: 'Roboto';\n    src: local('Roboto'), url(\/fonts\/custom-fonts\/Roboto-Regular.ttf) format('truetype');\n}<\/code><\/pre>\n<\/li>\n
          • \n
            第四步<\/strong>：测试字体显示。<\/p>\n
              \n
            • 浏览器页面应显示正确的字体。<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
              通过以上步骤，你可以在 WordPress 网站上成功地托管本地字体，从而显著提升网站的加载速度。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
              黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
              \r\n
              \r\n
              在 WordPress 中托管本地字体可以显著提高网站的加载速度。以下是如何实现这一目标的一般步骤：<\/p>\n
              1. 安装并配置字体<\/h3>\n
              首先，确保您的 WordPress 主题或插件支持使用本地字体。这通常可以通过选择器（如“Font Family”）来完成。例如，在 Gutenberg 编辑器中，您可以在标题标签 <h1><\/code> 或 <h2><\/code> 之后添加一个 font-family<\/code> 属性。<\/p>\n
              <title>我的网站标题 <span style=\"font-family: 'Your Font', sans-serif;\">My Website Title<\/span><\/title><\/code><\/pre>\n
              2. 下载字体文件<\/h3>\n
              访问您需要的字体网站，下载相应的字体文件。您可以从 Google Fonts、Typekit 等免费提供字体服务中获取字体。确保您选择了正确的字体文件大小和格式（如 .ttf<\/code> 或 .woff2<\/code>）。<\/p>\n
              3. 将字体文件上传到服务器<\/h3>\n
              将下载的字体文件上传到您的服务器上。如果您的主题或插件支持自定义 CSS 类，您可能还需要修改 CSS 文件以适应新的字体样式。<\/p>\n
              4. 在 WordPress 中应用字体<\/h3>\n
              现在，您已经成功地将字体文件上传到了服务器，并在 WordPress 中设置了合适的样式规则。接下来，您需要在页面或其他需要的地方应用这些新字体。<\/p>\n
              示例代码：<\/h4>\n
              如果您使用的是 Gutenberg 编辑器：<\/p>\n
              <style type=\"text\/css\">\n    .your-font {\n        font-family: 'Your Font', sans-serif;\n    }\n<\/style>\n\n<h1 class=\"your-font\">欢迎来到我的网站<\/h1><\/code><\/pre>\n
              如果您的主题支持自定义 CSS：<\/p>\n
              @import url('https:\/\/fonts.googleapis.com\/css2?family=Your+Font&display=swap');\nbody {\n    font-family: 'Your Font', sans-serif;\n}<\/code><\/pre>\n
              或者在每个需要的元素上直接引用字体：<\/p>\n
              <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Your+Font&display=swap\"><\/code><\/pre>\n
              5. 测试与优化<\/h3>\n
              最后，测试您的网站是否正确显示了新的字体。您还可以通过分析页面的加载时间来评估字体加载的影响。<\/p>\n
              示例代码：<\/h4>\n
              使用 Google Chrome 的开发者工具：<\/p>\n
                \n
              • 按 F12 打开开发者工具。<\/li>\n
              • 寻找“Performance”选项卡，然后点击“Page Load Events”，查看是否有“字体加载”的事件。<\/li>\n
              • 使用 Firebug 插件检查加载时间。<\/li>\n<\/ul>\n
                通过以上步骤，您应该能够有效地在 WordPress 上托管本地字体，从而显著提升网站的加载速度。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                Bug编译狮 要在 WordPress 网站上托管本地字体以优化网&..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2244","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=2244"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2244\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2244"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}