3

我不认为有一种简单的方法可以做到这一点，而且对我来说这似乎是 CSS 的一个缺点。

无论如何，这是问题所在：

我想在我的网页中使用different font所有粗体文本。

例如，看看下面的标记：

<span>Hello</span> <strong>world</strong>

和CSS：

span { font-weight: bold }

现在有没有一种简单或推荐的方法来让粗体字（使用标签的单词和使用 css 规则的单词）使用不同的字体？

就像是：

*[font-weight:bold] { font-family: 'Comic Sans'}

编辑：

我想要的是为页面中的所有粗体文本设置字体的全局选项。鉴于通常 CSS 文件会随着时间的推移而变得更大，因此为所有使用粗体文本的地方提供一个特殊的类并不是一个可行的解决方案。

4

5 回答 5

2

这涉及到一点谎言，但这似乎适用于 Firefox 13、Chrome 最新版、Opera 11.64 甚至 IE9：

<h1>This is Bold!</h1>
<p>This is <span id="bold">text</span> that is <strong>bolded</strong>.</p>
<p>Something <span style="font-style: italic;">here</span> is <i>Italicized</i>!</p>

@font-face {
    font-family: 'Merriweather';
    font-weight: regular;
    src: local('Unkempt'), url('http://themes.googleusercontent.com/static/fonts/unkempt/v4/MsFMwD9wD1OCzqw3trD0PA.woff') format('woff');
}
@font-face {
    font-family: 'Merriweather';
    font-weight: bold;
    src: local('Merriweather Bold'), local('Merriweather-Bold'), url('http://themes.googleusercontent.com/static/fonts/merriweather/v4/ZvcMqxEwPfh2qDWBPxn6nnl4twXkwp3_u9ZoePkT564.woff') format('woff');
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  src: local('Cousine Bold Italic'), local('Cousine-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/cousine/v4/y_AZ5Sz-FwL1lux2xLSTZXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
* {
    font-family: 'Merriweather', serif;
}
strong, #bold {
    font-weight: bold;
}

http://jsfiddle.net/userdude/vF9Qr/4

于 2012-06-12T08:17:03.367 回答
1

除非在 CSS 规范中另有说明，否则属性彼此独立工作是 CSS 的一个设计特性，而不是缺点。没有办法将两个属性耦合在一起。即使您将它们设置在相同的规则中，如在 中.foo { font-weight: bold; font-family: Awkward }，它们也会独立运行（并且它们中的任何一个或两者都可能被其他样式表规则覆盖）。

所以你只需要设计你对标记和 CSS 的使用，以便为所有粗体文本使用特定的字体，如果这是你想要的。（这在印刷上非常有问题，让我想知道是什么设计错误导致了这种假设的需要。）请注意，通常浏览器样式表可以加粗他们想要的任何内容，并且他们通常希望加粗标题元素和th元素等。因此，如果您想防止除您的命令之外的任何内容都变粗，您可以从* { font-weight: normal; }.

于 2012-06-12T08:31:27.130 回答
1

在您的代码中，所有这些span都是粗体，为什么您不只是更改标签font-family的？span

将您的 html 更改为

<span>Hello <strong>world</strong></span>

和你的CSS

span {font-weight:bold;}
strong {font-family:'Comic Sans';}

您也可以使用strong标签，它是使用粗体文本的完美标签。 http://www.w3.org/wiki/HTML/Elements/strong

于 2012-06-12T08:41:17.153 回答
0

向跨度（粗体）添加一个类，而不是样式，然后执行以下操作：

span.Bold { font-weight: bold }
strong, span.Bold { font-family: 'Comic Sans' }
于 2012-06-12T07:42:03.030 回答
0

我没有看到这里的问题？由于加粗文本将包含在 a borstrong元素中（取决于您的标记），您可以简单地使用font-family规则定位它吗？

于 2012-06-12T07:43:44.917 回答