页面加载后动态加载谷歌字体
Posted
技术标签:
【中文标题】页面加载后动态加载谷歌字体【英文标题】：Dynamically load google fonts after page has loaded 【发布时间】：2013-05-09 07:59:30 【问题描述】：我希望能够让用户选择他们希望页面显示的字体。Here 是 Google 建议您使用 javascript 的方式。
WebFontConfig =
google:
families: ['Tangerine', 'Cantarell']
;
(function()
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
)();
如何修改它以便在页面加载后重新获取字体？
【问题讨论】：
【参考方案1】：或者如果您不想要第三方库：
function addStylesheetURL(url)
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
// Load Tangerine & Cantarell
addStylesheetURL('https://fonts.googleapis.com/css2?family=Cantarell&family=Tangerine&display=swap'); h1
font-family: 'Cantarell', sans-serif;
p
font-family: 'Tangerine', cursive;
font-size: 30px;
<!DOCTYPE html>
<html>
<head>
<title>Dynamically load google fonts after page has loaded</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<h1>Dynamically load google fonts after page has loaded</h1>
<p>Some text.</p>
</body>
</html>【讨论】：
【参考方案2】：查看此 github 存储库中的 WebFont.load 命令：
https://github.com/typekit/webfontloader
你可以动态加载任何你想要的字体：
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load(
google:
families: ['Droid Sans', 'Droid Serif']
);
</script>
【讨论】：
确保在生产中使用特定版本。否则将没有缓存。 @sanmai：那不是真的......最新版本的缓存最长可达 1 年。我认为问题更多的是有缺陷的版本会破坏您的网站。 @DD。只是检查一下你是对的；目前对于version 1 as above in the post，Google 会提前一年提供Expires 标头；以前不是这样以上是关于页面加载后动态加载谷歌字体的主要内容，如果未能解决你的问题，请参考以下文章
从谷歌网络字体加载字体或从自己的服务器加载字体，哪一种在页面加载时间方面更有效？