Html 使用 CSS 将单个字体应用于整个网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10041706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying a single font to an entire website with CSS
提问by Michelle Smith
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
我想在我的整个网站上使用一种名为“Algerian”的字体。因此，我需要更改所有 HTML 标签，并且我不想为不同的标签编写不同的代码，例如：
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
下面写的方法也非常不鼓励：
div,button,span,strong{font-family:Algerian;}
回答by Jan Han?i?
Put the font-familydeclaration into a bodyselector:
将font-family声明放入body选择器中：
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
你页面上的所有元素都将继承这个字体系列（除非你稍后覆盖它）。
回答by Jan Han?i?
*{font-family:Algerian;}
better solution below Applying a single font to an entire website with CSS
下面更好的解决方案 使用 CSS 将单个字体应用到整个网站
回答by Salam El-Banna
The universal selector *refers to all elements,
this css will do it for you:
通用选择器*指的是所有元素，这个 css 会为你做：
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesomeicons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
但不幸的是，如果您使用的是FontAwesome图标，或任何需要自己字体系列的图标，这只会破坏图标并且它们不会显示所需的视图。
To avoid this you can use the :notselector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
为了避免这种情况，您可以使用:not选择器，fontawesome 图标的示例是<i class="fa fa-bluetooth"></i>，因此您可以简单地使用：
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
这会将这个族应用到文档中的所有元素，除了带有标签 name 的元素<i>，你也可以对类执行它：
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class, you can also target more than one class like this:
这会将这个系列应用到文档中的所有元素，除了具有类“fa”的元素，它指的是 fontawesome 默认类，你也可以像这样定位多个类：
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
回答by gabitzish
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
通过将 important 与通用选择器 * 一起使用，确保移动设备不会使用其默认字体更改字体：
* { font-family: Algerian !important;}
回答by Jukka K. Korpela
* { font-family: Algerian; }
The universal selector *refers to any element.
通用选择器*指的是任何元素。
回答by FelipeAls
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
由于浏览器可能已经为表单元素定义了不同的字体，这里有两种方法可以在任何地方使用这种字体：
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
在 pre/code、kbd 等元素上仍然会有等宽字体，但是，如果您使用这些元素，最好在那里使用等宽字体。
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use @font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
重要提示：如果很少有人在他们的操作系统上安装了这种字体，那么将使用列表中的第二种字体。在这里，您没有定义第二个字体，因此将使用默认的衬线字体，除了可能在 Linux 上之外，它将是 Times、Times New Roman。
有两个选项：如果您的字体可免费用作可下载字体，则使用 @font-face 或添加后备：第二、第三等，最后是默认系列（无衬线、草书 (*)、等宽字体）或衬线）。将使用用户操作系统上存在的列表中的第一个。
(*) 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.
(*) Windows 上的默认草书是 Comic Sans。除非你想欺骗 Windows 用户，否则不要这样做:) 这种字体很糟糕，除了你孩子的生日是受欢迎的。
回答by PICwebs
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
如果“正文”需要使用 1 和相同的字体，请将其放在页面的头部：
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body>and </body>will have the same font
标签之间的一切<body>，并</body>具有相同的字体
回答by Lee Alderman
Ok so I was having this issue where I tried several different options.
好的，所以我遇到了这个问题，我尝试了几种不同的选择。
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
我使用的字体是 Ubuntu-LI ，我在我的工作目录中创建了一个字体文件夹。在文件夹字体下
I was able to apply it... eventually here is my working code
我能够应用它......最终这是我的工作代码
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
我希望这适用于我的整个网站，所以我把它放在 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";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
如果我然后希望我所有的 H1 标签都是别的东西，可以说 sans sarif 我会做类似的事情
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
在这种情况下，只有我的 H1 标签将是 sans-sarif 字体，而我页面的其余部分将是 Ubuntu-LI 字体
回答by austin
in Bootstrap, web inspector says the Headings are set to 'inherit'
在 Bootstrap 中，网络检查员说标题设置为“继承”
all i needed to set my page to the new font was
我需要将我的页面设置为新字体
div, p {font-family: Algerian}
that's in .scss
那在 .scss 中
回答by intelijenjah
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
这个 html 对我有用。添加到 wordpress 中的画布设置。
Looks cool - thanks !
看起来很酷 - 谢谢！
