html - 在 H1 CSS 中更改一个词的权重

Question

很长一段时间以来，我一直在努力寻找如何执行以下操作。显然，我可以通过具有不同的 h1 并将它们定位来解决这个问题，但是我想知道如果不将这两个分成不同的 h1 是否可以解决这个问题。

那么我们开始吧。

HTML:

<h1 id = "introText1">Hi, my name is Liam Shalon.</h1>

CSS:

#introText1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -110px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

我需要:

• “嗨，我叫”，体重 300
• “Liam Shalon”体重 400

如何在不将其拆分为两个 h1 的情况下做到这一点？有办法吗？

谢谢 利亚姆

Answer 1

HTML

<h1 id="introText1">Hi, my name is <span>Liam Shalon.</span></h1>

CSS

#introText1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -110px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

span {
    font-weight: 900;
}

JSFiddle: http://jsfiddle.net/9kCeT/2/

请注意，我故意增加字体粗细以强调 <span>标签。 font-weight 100 的差异在 fiddle 上不是很明显。