使用CSS设置默认字体

Question

我有一个包含此代码的文件(CSS/FontStyle.css):

.courier {
font-family: courier;
}

和我的.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..

然而,字体仍然及时新罗马.我可以使用同一文件夹中的其他.css文件查找,不知道为什么这个文件不起作用？

提前致谢.

Answer 1

尝试改变

.courier {
font-family: courier;
}

至

* {
    font-family: courier;
  }

原因与@koala_dev提到的相同.".courier"使其仅适用于"courier"类的元素,并且从您显示的代码中,没有任何内容标记有该类名,因此不应用该字体.

的*选择,但是,将应用CSS字体家庭规则,所有元素的文本.

请注意,CSS使用特异性优先级,如果您有任何其他CSS选择器应用于相同的元素,但具有更多特定的标识符*,那么这些CSS规则中指定的任何字体系列将覆盖*选择器指定的常规规则.

更新(这在CSS中被认为是一个坏主意,但可能有帮助)

如果您无法找到其他CSS规则可能存在冲突的内容,则可以使用该!important规则覆盖其他规则(除非其他规则也使用它):

* { font-family: courier !important }

警告

!important然而,使用被认为是不好的做法,但是在你的情况下可能很有用,因为冲突的CSS规则似乎丢失了,你只需要一些有用的东西.

什么!important是干扰CSS通常的"级联"优先级规则.例如,该h2元素在下面的考试中将具有font-family courier,即使通常的结果是arial(因为更具体的选择器).更具体的选择器h2被不太具体的选择器覆盖,*因为*规则具有!important应用于它的谓词.

* { font-family: courier !important }
h2 { font-family: arial }

有关详细信息,请阅读此内容,并继续阅读以下链接:

...使用!important重写你的CSS值可能会被高度滥用,并使得混乱和难以维护CSS.不幸的典型用例是这样的:

1. 为什么我的FRAGGLE ROCKING CSS无法工作？!？!
2. (使用!重要规则)
3. 好的,现在它正在工作

然后下一个人出现并试图做出新的改变.他试图改变一些现有的CSS规则,但现在他的改变并没有表现出他们应该如何做.他将问题追溯到!重要规则,然后有一个选择.他可以尝试删除这些并试图让事情回到正轨,或者添加更多自己的东西来对抗它们并完成他的改变.由于他可能不知道为什么那些重要的规则首先被添加,他可能会选择第二种选择,因为害怕在他不知道的网站上的其他地方破坏某些东西.因此恶性循环开始了.

继续阅读:http://css-tricks.com/when-using-important-is-the-right-choice/

Answer 2

courier如果要将字体设置为页面使用的默认字体,则CSS规则用于类名

body {
    font-family: "courier";
}

Answer 3

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 {
    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.

Just my 2¢, hope it helps.