使用CSS将单个字体应用于整个网站

91

我想在整个网站上使用一种名为“阿尔及利亚”的字体。因此，我需要更改所有HTML标记，并且我不想为不同的标记编写不同的代码，例如：

button{font-family:Algerian;}
div{font-family:Algerian;}

强烈建议不要使用以下方法：

div,button,span,strong{font-family:Algerian;}

— 米歇尔·史密斯
source

3

font-family是一个继承的值，那么为什么不只在主体上定义它呢？

您可能要从Jukka K. Korpela中选择答案。它比当前选择的答案早一个月左右，并且内容几乎相同。

— 12

如何将全局字体应用于整个HTML文档的

— davidcondrey 2014年

我建议您不要使用（JanHančič）的答案，因为它将字体应用于所有html标记，甚至包括您不希望更改的标记。例如：如果您在td标签内制作了img标签，并将其设置为text-align：center和vertical-align：middle。使用这种方式，您的img标签将永远不会成为TD的中心。最好的方法：检查文档，然后将字体格式应用于其中包含文本的标签

— Mahdi Jazini

109

将font-family声明放入body选择器中：

body {
  font-family: Algerian;
}

然后，页面上的所有元素都将继承此字体系列（除非，当然，您稍后会覆盖它）。

— 扬·汉奇
source

11

font-family仅当没有样式表设置该元素的字体系列时，该元素才从其父元素继承。浏览器样式表通常设置字体系列至少为input，textarea，code，tt，和pre元件。

— Jukka K. Korpela 2012年

你是对的。我使用CSS重置已有很长时间了，我忘记了这种事情:)

— JanHančič'12

还是更好，还是结合两个最佳答案……正文，* {font-family：Algerian;}

— 詹姆斯·艾斯

105

*{font-family:Algerian;}

以下是更好的解决方案，使用CSS将单个字体应用于整个网站

— 萨拉姆·班纳（Salam El-Banna）
source

3

有趣的是，当使用Eric Meyer的CSS重置时，这不起作用

— ianbeks 2012

那不是将字体系列应用于每个元素吗？似乎将其应用于不必要的元素（如<img>）并且效率低下。我肯定是错的，但是我读过要谨慎地将样式应用于所有内容。

— Max Strater 2014年

由于通用规则不可替代，因此您将无法在网站上使用第二种字体。

— 朱利安·F·韦纳特

由于noboy提到了这一点，因此知道通用选择器很慢。更在这里：clairecodes.com/blog/...

— 泰耶索利姆

还是更好，还是结合两个最佳答案……正文，* {font-family：Algerian;}

— 詹姆斯·艾斯

48

通用选择器*引用所有元素，此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;
}

— 萨拉姆·班纳（Salam El-Banna）
source

由于使用了引导程序（glyphicons）和超棒的字体，该答案给出了当前网页中样式的非常需要的详细信息

— Lakshman

请注意：（非选择器）是CSS3，与所有浏览器都不兼容。IE 9+，我们必须等待至少10年，世界各地的所有人才能永远离开IE -9家庭：D：'（

— Mahdi Jazini

19

确保与通用选择器*配合使用，移动设备不会使用默认字体更改字体：

* { font-family: Algerian !important;}

— 含蓄的
source

18

* { font-family: Algerian; }

通用选择器*引用任何元素。

— Jukka K.Korpela
source

3

由于浏览器可能已经为表单元素定义了不同的字体，因此有两种在各处使用该字体的方法：

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

body {
    font-family: Algerian !important;
}

在pre / code，kbd等元素上仍然会有等宽字体，但是，如果您使用这些元素，则最好在那里使用等宽字体。

重要说明：如果很少有人在其操作系统上安装此字体，则将使用列表中的第二种字体。在这里，您没有定义第二种字体，因此将使用默认的衬线字体，它将是Times，Times New Roman，但可能在Linux上除外。
那里有两个选项：如果您的字体免费用作可下载的字体，请使用@ font-face或添加回退：第二，第三等，最后是默认系列（sans-serif，草书（*），等宽字体）或衬线）。将使用用户操作系统上存在的列表的第一个。

（*）Windows上的默认草书是Comic Sans。除非您想拖曳Windows用户，否则请不要这样做:)除了欢迎您的孩子生日外，此字体非常糟糕。

— 费利佩·阿尔斯
source

2

如果“正文”需要使用1且使用相同的字体，请将其放在页面的开头：

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

标签之间的一切<body>，并</body>具有相同的字体

— PIC网
source

1

好的，所以我遇到了这个问题，在这里我尝试了几种不同的选择。

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

我能够应用它……最终这是我的工作代码

我希望将其应用于我的整个网站，因此将其放在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标签成为其他标签，可以说sans sarif，我会做类似的事情

h1{
   font-family: Sans-sarif;
}

在这种情况下，只有我的H1标签是sans-sarif字体，而我页面的其余部分将是Ubuntu-LI字体。

— 李·奥尔德曼
source

0

在Bootstrap中，Web检查员说标题设置为“继承”

我需要将页面设置为新字体的全部是

div, p {font-family: Algerian}

在.scss中

— 奥斯汀
source

-1

*{font-family:Algerian;}

这个HTML为我工作。已在wordpress中添加到画布设置。

看起来很酷-谢谢！

— 智者
source