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

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

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

下面所写的方法也非常不鼓励:

div,button,span,strong{font-family:Algerian;}
252168 次浏览
小开
最佳答案

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

body {
font-family: Algerian;
}

页面上的所有元素都将继承这个 font-family (当然，除非您稍后重写它)。

小开 
* { font-family: Algerian; }

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

小开

由于浏览器可能已经为表单元素定义了不同的字体，这里有两种在任何地方使用该字体的方法:

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


body {
font-family: Algerian !important;
}

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

重要提示: 如果很少有人在操作系统上安装了这种字体，那么将使用列表中的第二种字体。这里您没有定义第二种字体，所以默认的 serif 字体将被使用，它将是 Times，Times New Roman，除非可能在 Linux 上使用。
这里有两个选项: 如果你的字体可以免费下载，那么使用@font-face，或者添加备用字体: 第二个，第三个等等，最后是默认的系列(sans-serif，cursive (*) ，monospace 或 serif)。将使用用户操作系统上存在的列表的第一个。

(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.

小开

确保移动设备不会改变其默认字体的字体使用重要与通用选择器 * :

* { font-family: Algerian !important;}
小开 
*{font-family:Algerian;}

下面是更好的解决方案 使用 CSS 对整个网站应用单一字体

小开 
*{font-family:Algerian;}

这个 html 为我工作。添加到 wordpress 的画布设置。

Looks cool - thanks !

小开

好吧，我有这个问题，我尝试了几种不同的选择。

我使用的字体是 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 字体

小开

如果“主体”需要使用1和相同的字体，请把它放在你的页面的头部:

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

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

小开

通用选择器 *指的是所有元素, 这个 css 会为你做到这一点:

*{
font-family:Algerian;
}

但不幸的是，如果您使用的是 FontAwesome图标，或任何图标，需要自己的字体家族，这将只是破坏图标，他们将不会显示所需的意见。

为了避免这种情况，你可以使用 :not选择器，一个很棒的图标是 <i class="fa fa-bluetooth"></i>，所以你可以简单的使用:

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

除了标签名称为 <i>的元素之外，这个家族将应用于文档中的所有元素，也可以应用于类:

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

这将把这个家族应用到文档中的所有元素，除了带有类“ fa”的元素，“ fa”指的是 fontawes 默认类, 您还可以像下面这样针对多个类:

*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
小开

在 Bootstrap 中, 网络检查员说，标题被设置为“继承”

我只需要把我的页面设置成新的字体

div, p {font-family: Algerian}

进去了


提交答案