时间戳

首页 > 解决方案 > 在 html 文档中使用多种 Google 字体

html - 在 html 文档中使用多种 Google 字体

问题描述

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

我也想要在多重权重中使用相同的字体（例如 Roboto）。不使用 css 属性进行控制，但实际上使用 google 提供的单独字体版本。

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

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

标签： htmlcssfontsgoogle-webfonts

解决方案

在这里你有一个例子，我已经把样式放在了 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>

我也想要在多重权重中使用相同的字体（例如 Roboto）。不使用 css 属性进行控制，但实际上使用 google 提供的单独字体版本。

不是 100% 确定它是否可能，但我认为你没有理由不能只使用该font-weight物业

推荐阅读