在 H1 CSS 中更改一个单词的权重答案

【问题标题】：Change One Word's Weight in a H1 CSS在 H1 CSS 中更改一个单词的权重
【发布时间】：2014-03-08 14:54:52
【问题描述】：

一段时间以来，我一直在尝试找出如何执行以下操作。显然，我可以通过不同的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？有什么办法吗？

谢谢利亚姆

【问题讨论】：

你能用<span>Liam Shalon</span>吗？
我没有意识到您可以将 h1 中的文本换行为“a”或“span”。这就是这样做的方法。

标签： html css text positioning

【解决方案1】：

您可以将其中一个部分包装在 <span> 中，并使用一个类来覆盖权重。喜欢：

HTML：

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

CSS：

.heavy {
 font-weight: 400;
}

并保留 h1 的正常权重为 300。

【讨论】：

我不想毁了你的雷，但是weight不是一个有效的CSS标签（至少JSFiddle不喜欢它）jsfiddle.net/9kCeT/1
抱歉，忘记了'font-' :)

【解决方案2】：

您可以在 H1 中使用 span 标签。使用与使用带有 id 的 CSS 相同的方式，但执行以下操作：

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

【讨论】：

【解决方案3】：

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 的差异在小提琴上并不是很明显。

【讨论】：