css - 输入字体继承
问题描述
为什么在此示例中输入获取Ubuntu
字体而不是字体?monospace
它是一些 HTML 代码中的一个小样本,其中输入嵌套得更深——但具有相同的效果。
font-family
我必须专门设置或继承哪些元素是否有一般规则?输入、标签、按钮……</p>
使用这样的东西是个坏主意吗?
body * { font-family: xxx; }
我想要做的是设置一个“全局字体”,并可选择在需要的元素上设置其他字体系列。认为这是通过设置它来实现的html, body { }
。明显不是。
示例代码:
html, body {
font-family: monospace;
}
.inp {
font-family: monospace;
/* or alternatively
font-family: inherit;
*/
}
<p>Some text</p>
<input type="text" value="123456789.0" /><br />
<input type="text" value="123456789.0" class="inp" />
结果(图片):
结果在 Ubuntu 上的 Fire Fox 中如下所示:
我将在开发人员工具中添加一些来自 Inspector 的图片。
起初我只查看工具的规则部分,正如它所说,直到我查看计算monospace
后我才发现错误;)
从左边的«Computed»和右边的«Rules»:
- <body> 有焦点:
- <p> 有焦点:
- 第一个 <input> 有焦点:
- 第二个 <input> 有焦点:
解决方案
看起来它正在从input
元素继承代理字体。
浏览器应用自己的样式。在您的情况下,浏览器的输入样式优先于 html 和 body 上的继承属性。在 chrome 上,您可以看到用户代理样式:
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
你最好用它.inp
来设计你的元素。或者为了保持一致性,您可以设置输入类型的样式:
input[type="text"] {
font-family: monospace;
}
推荐阅读
- r - 闪亮的 *for* 循环自动下载绘图
- javascript - 如何调用在firebase firestore中声明的变量
- javascript - 如何比较两个数组中的数据并在javascript中返回不匹配的数组?
- sql - SQL to_char 舍入 '9999.99'
- ios - SKStoreReviewController.requestReview() 本地化不起作用
- clojure - 我如何在 clojure 中使用环处理程序服务器静态 html 文件?
- flutter - 构建flutter应用程序的APK时任务':sms:verifyReleaseResources'执行失败
- vb.net - VB.net 一个子用于许多事件
- git - .gitignore not preventing a directory being pushed to github
- java - 如何使用 Programmatic API 向 Livy(在 Knox 下)提交工作?