logo标签列表

使用CSS为整个网站应用单一字体

htmlcssfontsfont-face
129

我想在整个网站上使用一个名为 "Algerian" 的字体。因此，我需要更改所有的HTML标签。但我不想针对不同的标签编写不同的代码，例如：


我想在整个网站上使用字体"Algerian"，需要更改所有HTML标签，但不想为不同的标签编写不同的代码。
button{font-family:Algerian;}
div{font-family:Algerian;}

以下方法也极不推荐使用：

div,button,span,strong{font-family:Algerian;}
3
字体族是一个可以继承的值，那么为什么不直接在文档主体中定义它呢？ - user806273
你可能想选择Jukka K. Korpela的答案。它比当前选择的答案早大约一个月，内容几乎相同。 - okm
可能是重复的问题：如何将全局字体应用于整个HTML文档。 - davidcondrey
我建议您不要使用（Jan Hančič）的答案，因为它会将字体应用于所有HTML标记，即使是您不想更改的标记。例如：如果您在td标记内部创建了img标记，并使其text-align:center和vertical-align:middle。使用这种方法，您的img标记永远不会位于TD的中心位置。最好的方法：检查您的文档，仅将字体格式应用于其中包含文本的标记。 - Mahdi Jazini
10个回答
150
将font-family声明放入body选择器中：
```

将font-family属性声明放在body选择器内：

```
body {
  font-family: Algerian;
}

除非您稍后覆盖它，否则页面上的所有元素都将继承这个字体系列。

18
当且仅当没有样式表为元素设置字体系列时，元素才从其父级继承font-family。浏览器样式表通常至少为input、textarea、code、tt和pre元素设置字体系列。 - Jukka K. Korpela
你说得对。我已经使用CSS重置这么长时间了，以至于忘记了这种事情 :) - Jan Hančič
121
3
有趣的是，当使用Eric Meyer的CSS重置时，这种方法不起作用。 - ianbeks
这难道不是将字体族应用于每个单独的元素吗？这似乎会将其应用于不必要的元素（如<img>），并且效率低下。我肯定可能是错的，但我已经阅读过小心地将样式应用于所有内容。 - Max Strater
由于通用规则不可覆盖，您将无法在网站上使用第二种字体。 - Julian F. Weinert
由于没有人提到这一点，通用选择器被认为是慢的。更多信息请参见：https://www.clairecodes.com/blog/2019-04-21-my-misconceptions-about-the-universal-selector/ - Terje Solem
或者更好的是，将两个最佳答案结合起来... body, * {font-family: Algerian;} - James Ikubi
71

通用选择器*指所有元素，这个CSS将为您完成：

*{
  font-family:Algerian;
}

但不幸的是，如果您正在使用FontAwesome图标或任何需要其自己字体族的图标，这将简单地破坏图标并且它们将无法显示所需的视图。

为了避免这种情况，您可以使用:not选择器，FontAwesome图标示例：<i class="fa fa-bluetooth"></i>，因此您可以简单地使用：

*:not(i){
  font-family:Algerian;
}

这将应用于文档中除具有标签名称<i>的元素之外的所有元素，您也可以对类进行操作：

*:not(.fa){
  font-family:Algerian;
}

这将应用于文档中除具有类名“fa”的元素之外的所有元素，该类名指代fontawesome默认类。您也可以像这样针对多个类：

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}
1
这个答案提供了一个非常需要的细节，因为在网页中使用来自Bootstrap（Glyphicons）和Font Awesome的图标，样式的当前用法。 - Lakshman
请注意，(not 选择器) 是 CSS3 的一部分，不兼容所有浏览器。IE 9+ 我们必须等待至少 10 年，直到全世界的人都永远离开 IE -9 家族 :D :'( - Mahdi Jazini
19
* { font-family: Algerian; }

通用选择器*匹配任何元素。

19

使用通用选择器 * 和 important 来确保移动设备不会用它们的默认字体更改字体：

* { font-family: Algerian !important;}
避免使用 !important。 - codenamezero
@codenamezero 为什么？ - dingalapadum
1
因为在正常情况下，你不应该使用!important。每当你尝试样式化某些内容时，你应该针对CSS的特定性进行目标定位。盲目地使用!important来强制样式化只会导致问题在后续出现，这是一种不好的实践。 - codenamezero
3

由于浏览器可能已经为表单元素定义了不同的字体，因此这里提供两种方法在全局使用此字体：

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

在像pre/code、kbd等元素上仍然会有单间距字体，但是，如果你使用这些元素，最好在那里使用单间距字体。
重要提示：如果很少有人在其操作系统上安装了此字体，则列表中的第二个字体将被使用。在此处您没有定义第二个字体，因此将使用默认的衬线字体，并且它将是Times、Times New Roman，除非您使用的是Linux。
有两个选项：如果您的字体可以作为可下载字体免费使用，请使用@font-face；或者添加回退（第二种，第三种等）以及最后的默认字体系列（无衬线、草书（*）、单间距或衬线）。用户操作系统中存在的列表中的第一个将被使用。
(*) Windows上的默认草书字体是Comic Sans。 除非您想要恶搞Windows用户，否则不要这样做 :) 这个字体很糟糕，除了您孩子的生日外，其他场合都不适用。
2
如果“body”需要使用相同的字体，请将以下代码放置在您页面的标签中：
<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

在标签<body>和</body>之间的所有内容都将具有相同的字体。

1

好的，我遇到了一个问题，尝试了几个不同的选项。

我使用的字体是Ubuntu-LI，我在我的工作目录下创建了一个字体文件夹。在fonts文件夹下。

最终我成功地应用了它... 这是我的工作代码

我希望它适用于整个网站，所以我把它放在css文档的顶部。在所有Div标签之上（虽然这并不重要，但是请知道，您分配的任何单独的字体都会在您的脚本发布后优先考虑）

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

如果我想把所有的H1标签都变成另一种字体，比如无衬线字体，我可以这样做：
h1{
   font-family: Sans-sarif;
}

只有在某些情况下，我的H1标签才会使用无衬线字体，而页面的其他部分则使用Ubuntu-LI字体。
0
在Bootstrap中，Web检查器显示标题设置为“inherit”。
我所需要做的就是将我的页面设置为新字体。
div, p {font-family: Algerian}

那是在 .scss 文件中

-1
*{font-family:Algerian;}

这个 HTML 对我很有用。在 WordPress 的画布设置中添加。

看起来很酷 - 谢谢！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接