[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThis document provides technical details about how the Google Fonts API works and its impact on browser rendering.\u003c/p\u003e\n"],["\u003cp\u003eThe API delivers tailored stylesheets with font information based on the requesting browser, optimizing font delivery.\u003c/p\u003e\n"],["\u003cp\u003eDifferent browsers exhibit varying behaviors when rendering web fonts, such as displaying blank spaces or using fallback fonts before the desired font loads.\u003c/p\u003e\n"],["\u003cp\u003eThe Web Font Loader offers control over font loading behavior and can help achieve consistent rendering across different browsers.\u003c/p\u003e\n"],["\u003cp\u003eFor optimal performance, particularly in Internet Explorer, consider the placement of the stylesheet link within the HTML head.\u003c/p\u003e\n"]]],[],null,["# Technical Considerations\n\nThis document provides some technical information about what's going on behind\nthe scenes when you request a web font with the Google Fonts API.\n\nThis document also gives information about browser-specific behavior.\n\nIf you just want to use the Fonts API, you don't need to read this page.\nHowever, reading this page may help you improve page load performance.\n\nWhat is the Google Fonts API serving?\n-------------------------------------\n\nWhen a browser sends a request for a Fonts API stylesheet (as specified in a\n`\u003clink\u003e` tag in your web page), the Fonts API serves a stylesheet generated for\nthe specific user agent making the request.\n\nA request for Inconsolata from Firefox, for example, returns the following CSS: \n\n```html\n@font-face {\n font-family: 'Inconsolata';\n src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');\n}\n```\n\nA request from Internet Explorer, on the other hand, returns: \n\n```html\n@font-face {\n font-family: 'Inconsolata';\n src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');\n}\n```\n\nAfter downloading the CSS, the browser downloads the font in the appropriate\nformat for the browser.\n\nBrowser-specific behavior\n-------------------------\n\nThis section describes each brower's default behavior with web fonts. Note that\nyou can control these behaviors using the\n[Web Font Loader](/fonts/docs/webfont_loader).\n\nFor a list of supported browsers, see the\n[FAQ](/fonts/faq#what_browsers_are_supported).\n\n### Google Chrome\n\nChrome renders the rest of the page, but until the font has loaded, it displays\na blank space in place of the text that uses the font.\n\n### Mozilla Firefox\n\nFirefox first displays the text in the default font, and then re-renders text in\nthe font once it has loaded. This behavior is known as a \"flash of unstyled\ntext.\"\n\n### Apple Safari\n\nSafari renders the rest of the page, but until the font has loaded, it displays\na blank space in place of the text that uses the font.\n\n### Microsoft Internet Explorer\n\nInternet Explorer renders the rest of the page, but until the font has loaded,\nit displays a blank space in place of the text that uses the font.\n| **Note:** For best display in IE, place the stylesheet `\u003clink\u003e` tag toward the beginning of the HTML `\u003chead\u003e` section. In IE, if the link is placed after `\u003cscript\u003e` tags, the entire page will block and not display anything until the font is loaded.\n\nMore generally, Internet Explorer's behavior may vary depending on the placement\nand existence of various elements. If you want to provide consistent behavior\nacross all browsers, use the [Web Font Loader](/fonts/docs/webfont_loader). For\nexample, you can choose to\n[make all browsers behave like Firefox](/fonts/docs/webfont_loader#example)."]]
