html 文档中有多个 Google 字体

Question

我只想将 google 字体应用到页面中的特定 css 选择器或元素。

我也想要相同字体的多重粗细（例如 Roboto）。不使用 css 属性控制，但实际上使用 google.

提供的单独字体版本

如果可能，id 不希望有外部样式表。

这可能吗？如果必须的话，我不介意在脚本标签中做。

Answer 1

这里有一个示例，我已将样式放在 html 中，因此您不需要外部样式表，尽管我不推荐它

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Rowdies&display=swap" rel="stylesheet">
<style>
  h2,
  h3,
  span {
    font-family: 'Roboto', sans-serif;
  }
  
  h2 {
    font-weight: 500;
  }
  
  h3 {
    font-weight: 700;
  }
  
  h1,
  p {
    font-family: 'Rowdies', cursive;
  }
</style>
<h1>h1 Rowdies</h1>
<h2>h2 Roboto font-weight 500</h2>
<h3>h3 Roboto font-weight 700</h3>
<p>p Rowdies</p>
<span>span Roboto</span>

I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually using the separate font versions provided by google.

不能 100% 确定它是否可行，但我看不出你为什么不能只使用 font-weight 属性

html 文档中有多个 Google 字体

Multple Google Fonts in html doc

html

css

fonts

google-webfonts