英文:
Using Both, `@font-face` And `<link ref="preload" as="font">` In The Header?
问题
只是想知道，在标题中将@font-face规则放在<style>标签中和将<link ref="preload" as="font">放在标题中有什么区别？
例如，Shopify的Dawn主题两者都有，首先是第44行的<style>标签中的@font-face，然后是第224行的<link>。这个选择会提高性能吗？
对我来说，当@font-face规则位于某个外部样式表中时，更有直观的意义使用<link>，因为必须首先下载该样式表。
英文:
Just wondering, what is the difference between putting the @font-face rules in a <style> tag in the header, or putting a <link ref="preload" as="font"> in the header?
For example, Shopify's Dawn theme has both, first the @font-face in some <style> tag at line 44, then the <link> at line 224. Will this choice improve performance?
It makes intuitively more sense to me to use the <link> when the @font-face rule sits in some external stylesheet, which has to be downloaded first.
答案1
得分: 0
不同之处在于<style>标签只会加载文档中使用的字体，而<link>标签会加载所有字体并储存，以便在需要时立即使用。这是我理解它们的方式。
英文:
The difference is that the <style> tag will only load the fonts that are used in the document, while the the <link> tag will load all the fonts and store, so that they are ready to be used right away when necessary.. that's how I understand them
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论