相关疑难解决方法(0)

将Google Web Fonts包含在页面中的首选方法是什么？

1. 通过链接标签？

   <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>

2. 通过样式表中的导入？

   @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);

3. 或使用网络字体加载器

   https://developers.google.com/webfonts/docs/webfont_loader

我正在使用这个谷歌字体font-family: 'Saira Semi Condensed', sans-serif;

链接： https: //fonts.google.com/specimen/Saira+Semi+Condensed

我正在从事 NuxtJS 项目。我必须在两个不同的组件中使用这种字体，但具有不同的字体粗细。我已经导入了所有的谷歌字体链接Layout.vue。

对于组件 A 来说，font-weight是600& 对于组件 B 来说，font-weight是800。所以我认为在相应的组件中给出不同的字体粗细会起作用。但它不起作用。仅应用了基本字体，即 Saira Semi Condensed, sans-serif;，但未反映字体粗细值。为了解决这个问题，我需要导入两个具有相同字体但不同字体粗细的谷歌字体链接，这Layout.vue使得它变得多余。

对于字体粗细：600

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap%27);

对于字体粗细：800

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap%27);

我认为我导入相同字体的两个链接的方式看起来不太好。你们能帮我解决这个问题吗？提前谢谢您。

代码：

布局.vue

<template>
  <div>
    <Nuxt />
  </div>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: …