标签中的字体系列

Question

当我在指定了font-family的div中有一个a标记时，font-family似乎只影响div中的文本，而不影响a标记中的文本。为什么会出现这种情况，如何解决？

<div style="font-family: 'Times New Roman', Times, serif"> Hello world! <a href="www.google.com"> Click here! </a> </div>

Answer 1

正如@John在评论中提到的，你可能有一些其他的CSS链接文件覆盖了你的font-family。您可以使用inline继承属性，因为您的div也具有内联定义的样式。

<a href="www.google.com" style="font-family: inherit;"> Click here! </a>

Answer 2

所描述的问题不是由发布的代码引起的，即原因在于未公开的代码部分。通常，在元素上设置例如font-family只会影响直接在元素中的文本，而不会影响内部元素中包装的文本。但是，如果内部元素没有CSS规则(在正在使用的author、user或browser样式表中)，则内部元素将从其父元素继承font-family。但在本例中，显然有一条CSS规则在a元素上设置font-family。

修复方法取决于所使用的其他CSS代码。这似乎不是一个真实的案例，而只是一个练习，所以最好使用不同的方法，例如

<div class="foobar"> Hello world! <a href="www.google.com"> Click here! </a> </div>

在链接的外部样式表或页面上的style元素中包含以下CSS代码：

.foobar, .foobar a { font-family: 'Times New Roman', Times, serif }

将foobar替换为反映元素含义或角色的名称，只是为了使代码更易于阅读。

但是，根据现在在a元素上设置font-family的其他CSS代码，您可能需要使用更具体的选择器，或者!important说明符，或者两者都使用。