Question

我正在添加一个span来包装文本的某个部分，以便我可以应用特定的字体，但由于某种原因，它会降到下面，以便它的一部分位于包含所有部分的段落的基线之下文本。

任何人都有关于如何移动它（跨度）的任何想法，以便它与文本的其余部分在同一行？

我正在尝试相对定位，但我想知道是否有更好的方法。

以下是代码：

<!Doctype HTML>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        html, body{
        margin:0;
        padding:0;
        font-size:16px;
        }
        .container{
        height:342px;
        width:100%;
        padding-top:2em;
        padding-left:2em;
        background:#ffffff;
        background:rgb(255, 255, 255);
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
       box-sizing:border-box;
       color:#333333;
       color:rgb(51, 51, 51);
       font-family:'Trend';
       font-size:120%;
       font-size:1.2rem;
       *behavior:url(../scripts/boxsizing.htc);
    }
    #welcome{
        background:#8cc047;
        background:rgb(140, 192, 71);
    }
    #welcome p.title{
        margin:0;
        font-size:225%;
        font-size:2.25rem;
    }
    #name{
        position:relative;
        font-family:'Cubano-web',Cubano,'Trend';
        left:16px;
        top:-7.1px;
    }
    </style>
    </head>
    <body>
        <header class="container" id="welcome">
        <p class="title">Hello,</p>
        <p class="title">I'm <span id="name">Noah</span>&mdash;</p>
        </header>
    </body>
</html>

Answer 1

我可能误解了这个问题但是如果你想要它在同一行，你不应该将文本分成2 <p>个标签

jsFiddle

<header class="container" id="welcome">
    <p class="title">Hello, I'm <span id="name">Noah</span>&mdash;</p>
</header>

修改

好的，所以我认为你正在使用几乎没有人会使用的自定义字体，这就是引发这个问题的原因。我建议您使用standard fonts for Mac and Windows或CSS3 @font-face来包含不同的字体，否则您无法确定用户是否拥有它们（就像现在一样）。

至于对齐自定义字体，基本上你不能真正做到这一点，并保证它会正确显示。您可以尝试使用position:relative;，就像您使用的那样，在这种情况下，我建议使用em而不是px。使用em可以解决来自缩放和不同设备的大量响应问题，因为您将根据字体大小而非像素移动它。

Answer 2

Hello在第一行和其他行中的其他文本，如果这是您需要的然后将此CSS添加到标题类

.title{
    clear:both;
    float:left;
    display:inline;
  }

并从#name移除顶部和左侧属性这样做..

同时删除position:relative;

 #name{
            font-family:'Cubano-web',Cubano,'Trend';
    }

这里是小提琴 http://jsfiddle.net/tFJ2x/1/

跨度导致内部内容降低？

2 个答案:

修改