使用 CSS 设置默认字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18118530/
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
Using CSS to set default font
提问by user2261573
I have a file (CSS/FontStyle.css) containing this code:
我有一个包含此代码的文件 (CSS/FontStyle.css)：
.courier {
font-family: courier;
}
and my .aspx file has this code:
我的 .aspx 文件有以下代码：
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tut1.aspx.cs" Inherits="Rtw.Tut1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="StatusLabel" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" href="CSS/FontStyle.css"/>
<h2>Unsigned Vs Signed Integers</h2>
//lots of text is below here..
However the font remains in time new roman. I can use other .css files from the same folder find, not sure why this one doesn't work?
然而，字体仍然及时新罗马。我可以使用同一文件夹中的其他 .css 文件查找，不知道为什么这个文件不起作用？
thanks in advance.
提前致谢。
回答by Joseph Myers
Try changing
尝试改变
.courier {
font-family: courier;
}
to
到
* {
font-family: courier;
}
The reason is the same as what @koala_dev mentioned. The ".courier" makes it apply only to elements of the class "courier," and from the code that you show none of your content is labeled with that class name, so the font is not being applied.
原因与@koala_dev 提到的相同。“.courier”使其仅适用于“courier”类的元素，并且从您显示的代码来看，您的任何内容都没有标有该类名，因此未应用该字体。
The *selector, however, will apply the CSS font-family rule to the text of all elements.
的*选择，但是，将应用CSS字体家庭规则，所有元素的文本。
Note that CSS uses a specificity priority, and if you have any other CSS selectors that apply to the same elements, but with a more specific identifier than *, then any font-family specified in those CSS rules will override the general rule specified by the *selector.
请注意，CSS 使用特定优先级，如果您有任何其他 CSS 选择器适用于相同元素，但具有比 更特定的标识符*，则这些 CSS 规则中指定的任何字体系列将覆盖*选择器指定的一般规则.
Update (this is considered a bad idea in CSS, but may help)
更新（这在 CSS 中被认为是一个坏主意，但可能会有所帮助）
If you can't find what other CSS rule may be conflicting, then you can use the !importantrule to override other rules (unless those other rules are also using it):
如果您找不到其他 CSS 规则可能发生冲突，那么您可以使用该!important规则覆盖其他规则（除非其他规则也在使用它）：
* { font-family: courier !important }
Warning
警告
Using !importantis considered bad practice, however, but is useful possibly in your case where the conflicting CSS rule seems to be lost and you just need something that works.
!important然而，使用被认为是不好的做法，但在您的情况下可能很有用，因为冲突的 CSS 规则似乎丢失了，而您只需要一些有效的东西。
What !importantdoes is interfere with CSS's usual "cascading" rules for priority. As an example, the h2element would have the font-family courier in the below exam, even though the usual result would be arial (because of the more specific selector). The more specific selector h2is overridden by the less specific selector *because the *rule has the !importantpredicate applied to it.
什么!important是干扰 CSS 通常的“级联”优先级规则。例如，h2在下面的考试中，元素将具有 font-family courier，即使通常的结果是 arial（因为更具体的选择器）。更具体的选择器h2被不太具体的选择器覆盖，*因为*规则!important应用了谓词。
* { font-family: courier !important }
h2 { font-family: arial }
For more info, please read this except and continue reading at the link that follows:
欲了解更多信息，请阅读以下内容并继续阅读以下链接：
... postscripting your CSS values with !important can be highly abused and make for messy and hard to maintain CSS. The unfortunate typical use case goes like this:
- WHY IS MY FRAGGLE ROCKING CSS NOT WORKING?!?!
- (use !important rule)
- OK, now it's working
Then the next guy comes along and tries to make new changes. He tries to alter some existing CSS rules, but now his changes aren't behaving how they should. He traces the issue back to the !important rules, then has a choice. He can try and remove those and attempt to get things back on track, or add some more of his own to fight them and get his change done. Since he might not know exactly why those !important rules were added in the first place, he might opt for the second option for fear of breaking something somewhere else on the site he's not aware of. And thus the vicious cycle starts.
... 使用 !important 对您的 CSS 值进行后记可能会被高度滥用，并使 CSS 变得凌乱且难以维护。不幸的典型用例是这样的：
- 为什么我的 FRAGLE ROCKING CSS 不起作用？！？！
- （使用！重要规则）
- 好的，现在可以使用了
然后下一个人出现并试图做出新的改变。他试图更改一些现有的 CSS 规则，但现在他的更改没有按照应有的方式进行。他将问题追溯到 !important 规则，然后有一个选择。他可以尝试删除这些并尝试让事情回到正轨，或者添加更多他自己的东西来对抗它们并完成他的改变。由于他可能不确切知道为什么首先添加了那些 !important 规则，因此他可能会选择第二个选项，以免破坏网站上他不知道的其他地方的某些内容。恶性循环就这样开始了。
Continue reading here: http://css-tricks.com/when-using-important-is-the-right-choice/
继续阅读：http: //css-tricks.com/when-using-important-is-the-right-choice/
回答by koala_dev
You CSS rule is for a class name courier, if you want to set the font as default for your page use
您的 CSS 规则适用于类名courier，如果您想将字体设置为页面使用的默认值
body {
font-family: "courier";
}
回答by jlmakes
Courier is Macintosh/Unix, whereas Courier New is Microsoft's version. I would try setting both, with a fallback just in case (which most consider good practice); you should replace:
Courier 是 Macintosh/Unix，而 Courier New 是 Microsoft 的版本。我会尝试设置两者，以防万一（大多数人认为这是很好的做法）；你应该更换：
.courier {
font-family: courier;
}
with
和
body {
font-family: "Courier New", "Courier", monospace;
}
Remember, if your CSS isn't working properly, a DOM inspector (eg. Chrome Inspect or Firefox Firebug) will help troubleshoot—especially when you need to identify if something is getting overwritten.
请记住，如果您的 CSS 无法正常工作，DOM 检查器（例如 Chrome Inspect 或 Firefox Firebug）将有助于排除故障——尤其是当您需要确定某些内容是否被覆盖时。
Just my 2￠, hope it helps.
只是我的2￠，希望它有帮助。
回答by Muhammad Umer
A)are you applying the courier class anywhere. If not, and dont want to, then use body as selection point it will affect all its children elements too.
A）您是否在任何地方应用快递类。如果不是，也不想，那么使用 body 作为选择点它也会影响它的所有子元素。
B)There may be classes other than yours which may have other css rules. So putting !importantlike i have will make sure browser listen to this css rule.
B)可能有除您之外的其他类可能有其他 css 规则。所以!important像我一样放置将确保浏览器监听这个 css 规则。
body {
font-family: courier !important;
}
回答by Praveen
You forget to apply the class.
您忘记应用该类。
.courier {
font-family: "courier";
}
HTML:
HTML：
<h2 class='courier'>Unsigned Vs Signed Integers</h2>
Maybe this help.
也许这有帮助。
.courier {
font-family: "courier" !important; //Incase if any css conflict occurs
}
From your comments, try this
根据您的评论，试试这个
* { font-family: "courier" !important; }. There may be css conflict
*represent all HTML elements.
! importantlike absolute, never get changed.
*代表所有 HTML 元素。
! important就像绝对一样，永远不会改变。
Also check whether for any similar CSS, if you found anything similar to this remove !important.
还要检查是否有任何类似的 CSS，如果您发现任何与此类似的内容，请删除 !important。
