显式均值

Question

如果网页设计师完全控制整个代码，那么很容易使用浏览器默认字体 - 只是不要改变任何字体样式而且你得到它。

但是，如果不对它进行完全控制，例如在html或body元素上定义了一些与字体相关的样式，或者与字体相关的CSS * { ... }的样式，则需要重新定义字体样式以不继承修改后的样式。

有没有办法，CSS，纯JavaScript或jQuery解决方案，允许为特定元素显式设置浏览器默认字体？

Answer 1

不幸的是，font-family没有简单的“初始值”。如您所知，它依赖于用户代理。

也许最接近的是使用font关键字。 font-family:serif;将使用浏览器认为的默认serif字体。对于sans-serif，font-family:sans-serif;是相同的。

这是我能提出的最接近的建议，对不起！

Answer 2

是。做

.my-selector {
    font: initial;
}

Answer 3

嗯，我理解你的要求听起来很简单，但不幸的是，这只是网络技术的限制。我们无法以任何方式使用CSS或jQuery读取浏览器/系统的字体。

Web应用程序无法读取由浏览器或系统呈现的字体。它不是那样设计的。我们所能做的就是应用font-family:serif或类似的东西。

我为您尝试了几个POC，但无法检索浏览器默认设置。

我们所能做的就是在W3C中为字体系列重置创建一个新票证，让我们一直希望它们包含类似的内容。

如果我找到了什么，我仍然会为你做一些挖掘并回复你。这绝对是一个非常重要的要求。

我之前处理过这种情况但反过来。就像覆盖所需的字体一样..就是这样！

然而，

还有另一种选择。我不会说这是最好的方法，但我们可以试试这个：

编写一个读取用户代理的JavaScript，类似这样..

var setDefaultFont = {
    Android: function () {
        $('*').css( "font-family", "//FONT USED IN ANDROID BROWSERS" );
    },
    BlackBerry: function () {
        $('*').css( "font-family", "//FONT USED IN BLACKBERRY BROWSERS" );
    },
    iOS: function () {
        $('*').css( "font-family", "//FONT USED IN iOS BROWSERS" );
    },
    Opera: function () {
        $('*').css( "font-family", "//FONT USED IN OPERA BROWSERS" );
    },
    Windows: function () {
        $('*').css( "font-family", "//FONT USED IN WINDOWS BROWSERS" );
    }
};

如果需要，我们可以专门针对Windows浏览器。

我知道这不是最好的解决方案，但应该有效

Answer 4

这已经得到了解答，但我找到了一个可能有用的解决方案：

*, html, body {
     font-family: inherit !important;
}

这告诉HTML文档的根元素从父级继承它们的字体。在这种情况下，父级将是浏览器的用户代理样式，因此您的字体将继承默认值。

Answer 5

我一直在经常看到你的问题，而且它们似乎主要是理论案例。在任何情况下，其他人或多或少都指向了正确的方向，但我会发出声音来重新强制执行某些点。

显式均值

Javascript和CSS中没有现有的内置功能来显式分配浏览器默认字体。使用现有的CSS规范这是完全不可能的，但是，理论上，您可以使用Javascript来获取显式使用的字体名称。我不会尝试编写Javascript代码，因为我预测准确描绘它会耗费时间，但我至少会尝试提供有关如何实现的可能性。此外，在任何情况下，我都不会暗示以下想法会奏效，但我相信它可行。

概念结构

我建议如下：

创建5个span节点，如下所示：
```
Monospace Text
Sans-Serif Text
Serif Text
Fantasy Text
Cursive Text
```
五个通用字体系列是浏览器默认值，但是这并不会立即解决您的问题，因为a）它没有给我们一个人正在使用的显式字体名称，而b）给定元素的默认字体是其中一个，而不是全部。

尊重“一个人正在使用”的字样;默认情况下浏览器将使用的内容与用户将默认字体设置为默认字体的内容截然不同;这就是Rahul Patil的结构不完美的原因，尽管我承认这是我最初的假设，在大多数情况下他绝对是正确的。

注意

某些元素默认使用不同的通用字体系列，并且从浏览器到浏览器不一致。例如，代码块通常默认呈现为等宽字体。为保持一致性，您需要使用CSS重置文件。
使用类似的方法检测字体：
```
http://www.lalit.org/lab/javascript-css-font-detect/
```
此字体检测尚未准备好您开箱即用的内容，您需要对其进行修改以解析字体列表并将其与默认值匹配。这个脚本只显示了可能对你有用的理论;字符维度比较，因为通常所有字体的高度和宽度都不同，当字体大小较大时，这种差异更容易检测（因此它使用72像素）。

买者

我能想到的一个主要警告是，这通常只能检测ASCII / Romanized字体，可能不适用于Unicode集;我相信你可以修改它，但是为了准确地检测字体，它可能是计算密集的。您可能会保留适用于每种语言的字体数据库，您需要一种一致的方法来检测浏览器（而不是系统）的语言设置;这并不容易，甚至可能以我一贯的方式知道。

您可以使用Javascript中的“navigator.language”和“navigator.userLanguage”变量来获取语言设置的概念，但据我所知，这些反映了系统语言而不是浏览器使用的语言。服务器端代码可能是必要的，以达到任何精确度。
构建一个Javascript例程来解析字体列表，并将所述字体与此列表的第1项中创建的元素的维度进行比较。您可以使用Flash获取解析所需的字体列表。我怀疑Java applet也能够做到这一点。这可能会有所帮助（JS + Flash）：
```
https://github.com/gabriel/font-detect-js
http://font-detect.s3.amazonaws.com/index.html
```
理论上，这应该为您提供此人使用的显式字体名称。您可以对此进行扩展，并为每个单独的元素类型（例如sans-serif，serif，monospace，fantasy和cursive）获取默认的通用字体，但我怀疑这将是CPU密集型的，并且最好用于某些类型的系统级应用;例如缓存给定成员的给定条件，并创建迎合该特定用户的CSS。

隐含手段

许多人提出了其他一些方法，Daniel Lisik特别突出了我可能做的事情，因为“serif”声明在其背景下是无效的，因为声明“sans-serif！important”会指定“sans-衬线“;您实际上可以使用“inherit！important”进行构建，并使用给定的“font-family！important”进行严格的字体系列更改。例如：

<html>

<head>

<style>

div { font-family: Cursive; }

p { font-family: Inherit !important; }

.serif { font-family: Serif; }
.sans-serif { font-family: Sans-Serif; }

.serif-important { font-family: Serif !important; }
.sans-serif-important { font-family: Sans-Serif !important; }

</style>

</head>

<body>

<div>
    Normal Div Text

    <p>Default P Text</p>

    <p class="serif">Serif</p>
    <p class="sans-serif">Sans-Serif</p>

    <p class="serif-important ">Important, Serif</p>
    <p class="sans-serif-important ">Important, Sans-Serif</p>

</div>

</body>

</html>

“Normal Div Text”将出现在“Cursive”
“默认P文字”将出现在“Cursive”
“Serif”将出现在“Cursive”中
“Sans-Serif”将出现在“Cursive”中
“重要，Serif”将在“Serif”中
“重要，Sans-Serif”将出现在“Sans-Serif”

如果您需要任何澄清，只需询问，我会根据需要进行编辑。

参考

http://www.w3.org/TR/CSS21/fonts.html#value-def-generic-family

http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit

资源

http://www.lalit.org/lab/javascript-css-font-detect/

https://github.com/gabriel/font-detect-js

http://font-detect.s3.amazonaws.com/index.html

Answer 6

你的问题不是很清楚。我不知道我是否误解了，但无论如何我都会尽力帮助。

如果您真的决定尊重浏览器中设置的默认浏览器字体和字体大小，那么这应该可以解决问题：

html, body {
    font-size: 100% !important; 
}

body {
    font-family: serif !important; /* Or sans-serif, monospace or whatever is appropriate. */
}

然后继承应该启动，只要你不在其他所有东西上设置字体堆栈或大小。

请记住，the cascade order在这里发挥作用。

这将覆盖所有类型的样式表，但用户样式表除外，其中包含在相关元素上设置的!important声明。在这种特殊情况下，您只需要尊重用户的选择。

就个人而言，我只想写下这个：

html, body {
    font-size: 100%; 
}

body {
    font-family: serif; /* Or sans-serif, monospace or whatever is appropriate. */
}

然后我会避免在其他所有内容上设置字体堆栈，因为如果用户确实有自己的方式，他可能会在对他重要的元素上设置!important声明，比如字体等等，在他自己的用户样式表中 - 这将覆盖普通作者样式表（省略!important声明）。

其他人都是对的，initial关键字是一种可行的方法，只要你不担心IE，因为没有IE的版本支持它。

所以我认为你最好的办法是为IE寻找某种类型的polyfill，或者创建你自己的。 Modernizer可能值得一看，或者如果你想创建自己的，有polyfill.js。抱歉，我对创建polyfills一无所知！

我知道这不是一个完美的答案（早上6点，我整晚都在上班），但我希望它能以某种方式帮助你。

P.S。我刚刚意识到你可能一直在指的是劫持浏览器的设置以设置你想要设置的默认字体，无论用户如何设置它。这样做毫无意义。在任何情况下，如果用户拥有自己的用户样式表，我认为它不会起作用，特别是如果它在字体属性上设置了!important声明。

Answer 7

你可以这样试试：

.element {
   font-family: -webkit-body;
   font-family: -moz-body
   font-family: -o-body
   font-family: body
}

并尝试以下工作正常：

.element {
   font-family: none;
}

Answer 8

您只是在谈论元素选择器吗？

div {
  color: red;
}

input {
  font-family: sans-serif;
}

Answer 9

根据我的理解，font-family: none;在chrome和firefox中对我来说很好。

.element {
font-family: none;
}

此代码将继承默认浏览器字体。

Answer 10

使用通用字体系列。浏览器将为他选择哪种字体“最佳”：）

font-family: serif;

浏览器默认字体的CSS

10 个答案:

显式均值

概念结构

注意

买者

隐含手段