{"id":2413,"date":"2023-09-19T09:53:36","date_gmt":"2023-09-19T02:53:36","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2413"},"modified":"2024-01-03T12:14:12","modified_gmt":"2024-01-03T05:14:12","slug":"toi-uu-google-font-bang-javascript","status":"publish","type":"post","link":"https:\/\/artru.net\/zh\/toi-uu-google-font-bang-javascript\/","title":{"rendered":"\u4f7f\u7528 JavaScript \u4f18\u5316 Google \u5b57\u4f53"},"content":{"rendered":"

\u4e00\u4e2a\u6f02\u4eae\u7684\u7f51\u7ad9\u8fd8\u9700\u8981\u4e00\u5957\u597d\u7684\u5b57\u4f53\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528 Google Font \u6765\u83b7\u53d6\u60a8\u559c\u6b22\u7684\u5b57\u4f53\u96c6\u3002\u4e0d\u8fc7\uff0c\u8fd9\u6216\u591a\u6216\u5c11\u5f71\u54cd\u4e86\u7f51\u7ad9\u7684\u52a0\u8f7d\u901f\u5ea6\uff0c\u540c\u65f6\u4e5f\u964d\u4f4e\u4e86\u5185\u90e8\u6027\u80fd\u5f97\u5206 PageSpeed \u89c1\u89e3<\/a>.<\/p>\n\n\n\n

\u6709\u5f88\u591a\u5173\u4e8e\u5982\u4f55\u4f7f\u7528\u5c5e\u6027\u4f18\u5316 Google Font \u7684\u6587\u7ae0 font-display: swap<\/code>\u3002\u4f46\u5b83\u4ec5\u4fee\u590d\u4e86\u201cwebfont load\u201d\u9519\u8bef\uff0c\u5e76\u6ca1\u6709\u63d0\u9ad8\u6027\u80fd\u5206\u6570\u3002<\/p>\n\n\n

\n
\"\u7f51\u9875\u5b57\u4f53\u52a0\u8f7d\u9519\u8bef\"
\u7f51\u9875\u5b57\u4f53\u52a0\u8f7d\u9519\u8bef<\/figcaption><\/figure>\n<\/div>\n\n\n

\u5728\u672c\u6587\u4e2d\uff0c\u6211\u5c06\u5411\u60a8\u5c55\u793a\u5982\u4f55\u4f7f\u7528 JavaScript \u4f18\u5316 Google \u5b57\u4f53\uff0c\u4ee5\u4fbf\u60a8\u53ef\u4ee5\u81ea\u7531\u5730\u4e3a\u60a8\u7684\u7f51\u7ad9\u9009\u62e9\u5b57\u4f53\uff0c\u800c\u4e0d\u5fc5\u518d\u62c5\u5fc3\u901f\u5ea6\u3002<\/p>\n\n\n\n

\u9009\u62e9\u8c37\u6b4c\u5b57\u4f53<\/h2>\n\n\n\n

\u8981\u9009\u62e9\u5b57\u4f53\uff0c\u60a8\u9700\u8981\u8bbf\u95ee \u8c37\u6b4c\u5b57\u4f53<\/a>.<\/p>\n\n\n\n

\u4f5c\u4e3a\u6211\u7684\u793a\u4f8b\uff0c\u5b57\u4f53\u201cMontserrat\u201d\u6709 2 \u79cd\u5b57\u4f53\u5927\u5c0f\u201c400\u201d\u548c\u201c700\u201d\u3002<\/p>\n\n\n\n

\u60a8\u8fd8\u53ef\u4ee5\u9009\u62e9\u8bb8\u591a\u5176\u4ed6\u5b57\u4f53\u6837\u5f0f\u5e76\u5c06\u5b83\u4eec\u5bfc\u5165\u5230\u5355\u4e2a URL \u4e2d\u3002<\/p>\n\n\n

\n
\"\u8c37\u6b4c\u5b57\u4f53\u8499\u7279\u585e\u62c9\u7279\"
\u8c37\u6b4c\u5b57\u4f53\u8499\u7279\u585e\u62c9\u7279<\/figcaption><\/figure>\n<\/div>\n\n\n

\u4f7f\u7528 JavaScript \u4f18\u5316 Google \u5b57\u4f53<\/h2>\n\n\n\n

\u6709\u4e24\u79cd\u4e0b\u8f7d Google \u9ed8\u8ba4\u5b57\u4f53\u7684\u65b9\u6cd5\u3002<\/p>\n\n\n\n

<!-- 1. <link> -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<!-- 2. @import -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap');\n<\/style><\/code><\/pre>\n\n\n\n
\u5c3d\u7ba1Google Font\u5df2\u7ecf\u6dfb\u52a0\u4e86\u5c5e\u6027 font-display: swap<\/code>\u3002\u4f46\u5728 PageSpeed Insights \u4e0a\u6d4b\u8bd5\u6027\u80fd\u65f6\uff0c\u6211\u4ecd\u7136\u9047\u5230\u4e0e FCP\uff08First Contentful Paint\uff09\u548c LCP\uff08Largest Contentful Paint\uff09\u76f8\u5173\u7684\u9519\u8bef\u3002<\/p>\n\n\n\n
\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u5c06\u4f7f\u7528 JavaScript \u4ee3\u7801\u52a0\u8f7d Google Font\uff0c\u5e76\u5c06\u5176\u653e\u7f6e\u5728\u9875\u9762\u5e95\u90e8\uff08\u9875\u811a\uff09\u3002<\/p>\n\n\n\n
<script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n        const script_font = document.createElement('link');\n        script_font.href = 'https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap';\n        script_font.setAttribute('rel', 'stylesheet');\n        document.body.appendChild(script_font);\n    });\n<\/script><\/code><\/pre>\n\n\n\n
\u5728\u884c script_font.href<\/code> \u8bf7\u4ece\u9879\u76ee\u4e2d\u83b7\u53d6 url @import<\/code> \u8c37\u6b4c\u63d0\u4f9b\u7684\u3002<\/p>\n\n\n\n
\u66f4\u6539\u8fd9\u79cd\u52a0\u8f7d\u5b57\u4f53\u7684\u65b9\u5f0f\u540e\uff0c\u68c0\u67e5\u60a8\u7684\u7f51\u7ad9\u901f\u5ea6\u662f\u5426\u6709\u6240\u6539\u5584\u3002<\/p>\n\n\n
\n
\"\u4f18\u5316Google
\u4f18\u5316Google Font\u540e\u7684\u901f\u5ea6<\/figcaption><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"
M\u1ed9t website \u0111\u1eb9p c\u0169ng c\u1ea7n c\u00f3 m\u1ed9t b\u1ed9 Font \u1ed5n. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Google Font \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c b\u1ed9 Font \u01b0ng \u00fd. Tuy nhi\u00ean, \u0111i\u1ec1u n\u00e0y \u00edt nhi\u1ec1u \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 load c\u1ee7a trang web v\u00e0 n\u00f3 c\u0169ng l\u00e0m gi\u1ea3m \u0111i\u1ec3m hi\u1ec7u su\u1ea5t trong PageSpeed Insights. C\u00f3 nhi\u1ec1u b\u00e0i vi\u1ebft h\u01b0\u1edbng […]<\/p>\n","protected":false},"author":1,"featured_media":2438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/comments?post=2413"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/posts\/2413\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/media\/2438"}],"wp:attachment":[{"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/media?parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/categories?post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/zh\/wp-json\/wp\/v2\/tags?post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}