我正在使用CMS,我只能访问CSS文件.所以,我不能在文档的HEAD中包含任何内容.我想知道是否有办法从CSS文件中导入Web字体？
Preload 和 prefetch 都用于提前请求资源，以便稍后的资源加载可以更快。两个好像可以互换
<link rel="preload" href="foo.js" as="script">
<link rel="prefetch" href="foo.js">
没有注意到任何区别。
它们的区别是什么？
我想知道从Google字体加载字体的最佳方法是什么.我用Google搜索并创建了<link/> 比...更好的方式@import.有没有工具可以通过网络和浏览器测量速度和性能？怎么样的JavaScript方法？
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
要么
@import url(http://fonts.googleapis.com/css?family=Oswald:300);
要么
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Oswald:300:latin' ] }
};
(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);
})(); </script>
我最近参与了一个项目; 在开始提到的第一件事之一是不使用谷歌CDN或谷歌网络字体 - 没有解释.
我一直使用CDN和Google Web字体而不是font-face; 这些谷歌开发者选项有什么问题吗？什么可能很麻烦？
使用原始资源(EG.直接来自jQuery网站)或font-face是更好的做法吗？
我想使用名为 poppins 的 Google 字体，这是该字体的 url https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap。有谁知道要这样做吗？
（我是新来的所以如果这不是问它的地方，请告诉我）
通常我添加<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'>到<head>我的页面。对于多个页面，总是有可能出现不一致/错误，而且更新每个页面可能会令人头疼。
Can I instead just use @import url(http://fonts.googleapis.com/css?family=Open+Sans); at the first line of my main CSS file?
Advantage to this is updating one CSS file rather than updating every single page where it's in the <head>. But I've read some answers that say there may be a resource loading problem...but that discussion was 3 years ago. Can't find a current answer addressing this.
EDIT
To avoid SO from thinking this is …
我试图找出哪个加载速度更快。检查 Chrome 中的审计选项卡后，这两种方法都会导致第一个有意义的绘制缓慢。我正在使用 googleapi 字体在我的网站中呈现字体。下面是我比较的代码
<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>
对比
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
现在似乎在我的本地目录上托管字体加载速度较慢。我不确定我所做的是否正确。知道哪个更快以及实现它的最佳方法是什么？
我只是想把第一个有意义的油漆减少一半。我使用其中的链接来引用 googleapi，但在检查审核时，仅从 googleapi 站点加载它就需要 1,500 毫秒。
我有一个使用 Google CDN 中的两种字体的网站。
第一个是 @imported from a Google CDN 在主 CSS 文件的开头，如下所示：
// Start of file
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic);
html, body { height: 100%, width: 100%:
// rest of file
第二种字体从 Google CDN 直接链接到 HTML 中，如下所示：
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600" />
任何人都可以解释每种方法对性能的影响以及为什么会选择一种方法而不是另一种方法？
fonts ×6
css ×4
cdn ×2
google-cdn ×2
html ×2
css3 ×1
google-fonts ×1
import ×1
pagespeed ×1
prefetch ×1
preload ×1
seo ×1
tailwind-css ×1