字体家族没有被继承到表单输入字段？

不要输入文本字段或选择框等html表单输入元素会自动继承体内的font-family属性吗？例如：字体家族没有被继承到表单输入字段？

body { 
font-family:'Lucida Casual', 'Comic Sans MS'; 
}

它不会使用上面的字体在下面的表单输入字段：

<form> 
    <div> 
     <label for="name">Name</label> 
     <input id="name" name="name" type="text" /> 

    <div> 
</form>

请看看http://jsfiddle.net/3fkNJ/

它是常见的，我们必须重新 - 为输入字段定义字体家族，还是我做错了什么？

来源

2011-06-29 sunjie

是的，您需要将font放入input标记中。

.input{ 
padding:5px; 
font-size:16px; 
font-family:'Lucida Casual', 'Comic Sans MS';  
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

您还可以使用inherit设置font上form领域。

input, textarea, select{font-family:inherit;}

http://jsfiddle.net/jasongennaro/3fkNJ/7/

编辑 - 解释加

大多数浏览器渲染内form元素作为用户的操作系统的文本。据我了解，这是为了保持用户的共同外观和感觉。但是，它可以全部被上面的代码覆盖。

来源

2011-06-29 12:37:03

这并不在jQuery的自动完成的情况下工作。你有线索为什么？ –

@ManasPaldhe这可能是因为自动完成有一个更具体的CSS选择器。我检查了http://jqueryui.com/autocomplete/，它显示'input'有一个'tags'的“tags”。在这个'id'中设置字体，你应该很好。 –

代码没有问题。这是常见的，因为输入字段默认采用OS主题设置。这已在stackoverflow中讨论过。查看下面的链接了解更多详情。

Why <textarea> and <textfield> not taking font-family and font-size from body?

来源

2011-06-29 12:47:35 z0mBi3

试着改变你的CSS身体属性

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

的*部队每个子元素继承你写的，因为过规范的CSS规则的CSS规则中指定的值。请参阅fiddle here

如果您希望页面上的每个元素都具有相同的字体系列值，如果您希望表单具有不同的值，则此功能非常方便。

Smashing Magazine has an article这可能会帮助你进一步。

我希望它有帮助。

来源

2011-06-29 12:50:07 Ryan

这会工作，但它是sl practice的练习。性能会受到来自'*'选择器的影响，而'*'会优先考虑您可能无法预料的方式。 – TechZilla

它并没有让它成为“草率的练习”，它只是意味着在使用时人需要了解他们在做什么，因此是粉碎杂志的参考。就性能而言，是的，它使用更大的浏览器开销，但如果适当的话取决于目标，每个元素是否应该具有相同的字体，而不管或只有几个元素？如果它只是一些元素，那么在选择器中指定更好。对我来说，孙洁很清楚，他希望所有元素都具有相同的字体，而不管我的解决方案是否适合执行此操作，但是，是的，它将在其他地方收费。 – Ryan

我想你误解了，我所说的是“草率的做法”。虽然最好避免使用无关的“*”选择符，但只使用一个不一定是“草率实践”。另一方面，使用你的CSS来避免继承特性是“马虎的做法”。作者没有提到他希望*通用*在具有指定字体系列的选择器之前。 – TechZilla

它的工作对我来说：

tags-input *, tags-input *:before, tags-input *:after { 
    font-family: "IRANSans" !important; 
} 

tags-input .tags .input { 
    padding-right: 5px; 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
} 

tags-input .tags .tag-item { 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
}

来源

2016-05-08 07:00:20 mehdi

字体家族没有被继承到表单输入字段？

回答

相关问题