如何为html中的所有粗体文本提供不同的字体?

时间:2012-06-12 07:38:14

标签: html css

我认为没有一种简单的方法可以做到这一点,它看起来像CSS的缺点。

无论如何这是问题所在:

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

例如,请查看以下标记:

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

和CSS:

span { font-weight: bold }

现在有一种简单或推荐的方法可以使用不同的字体来获取粗体单词(使用标签的单词和使用css规则的单词)吗?

类似的东西:

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

编辑:

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

5 个答案:

答案 0 :(得分:1)

它涉及一点谎言,但这似乎适用于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

答案 1 :(得分:1)

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

所以你只需设计你对标记和CSS的使用,这样就可以为所有粗体文本使用特定的字体,如果这是你想要的。 (它的排版非常值得怀疑,让我想知道设计错误导致了什么需要。)请注意,通常浏览器样式表可以加粗他们想要的任何内容,他们通常希望加粗标题元素和th元素等等。因此,如果您希望防止任何事情变得粗体,除了您的命令,您将从* { font-weight: normal; }开始。

答案 2 :(得分: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

答案 3 :(得分:0)

将一个类添加到范围(粗体),而不是样式,只需执行此操作:

span.Bold { font-weight: bold }
strong, span.Bold { font-family: 'Comic Sans' }

答案 4 :(得分:0)

我在这里没有看到问题?由于加粗文本将包含在bstrong元素中(取决于您的标记),您只需使用font-family规则进行定位即可?