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

我怎么能这样做而不必将它分成两个h1s？有办法吗？

由于利安

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/

请注意，我故意增加font-weight以强调<span>标记。小提琴的font-weight差异不是很明显。

Answer 2

你可以用<span>包裹其中一个部分，用一个类来覆盖权重。像：

<强> HTML ：

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

<强> CSS ：

.heavy {
 font-weight: 400;
}

让h1的正常体重为300.

Answer 3

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

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

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

3 个答案: