Css 如何在不使用额外div的情况下使同一行上的文本具有不同的字体？

我在图像上有一个覆盖条，里面有文字

aasimAZAM

我希望aasim是一种薄字体，AZAM是一种更粗体的字体

我的CSS是

h4 {position:relative; top:-60px; left: 0px; width: 100%; font-family:"Futura Bk BT"; color:#F00;}
h4 span { color: white; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 8px;}
h5 {position:relative; top:-60px; left: 0px; width: 100%; font-family:"Futura Std ExtraBold";color:#F00;}
h5 span { color: white; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 8px;

HTML是

<div class="picturebox"><img src="images/001.jpg" width="192" height="192" alt="001" /><h4><span>aasim</span></h4><h5><span>AZAM</span></h5></div>

aasimAZAM

问题是跨度在两条不同的线上

---

如何修复此代码，使文本位于同一行和跨距上，并具有不同的字体？或者有其他方法可以做到这一点吗？

这与跨度无关，

和

已经被视为标题，它们总是放在新行上

如果您不打算将这些作为标题（它不喜欢您这样做），请不要使用

h

标记。如果必须，请放入

display:inline

和

样式的css中的code>。

尝试以下操作：

h4 { width: 100%; font-family:"Futura Bk BT"; color:#F00; display:inline; color: #dadada; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0);  background: rgba(0, 0, 0, 0.7); padding: 8px; font-weight:normal}

h5 {width: 100%; font-family:"Futura Std ExtraBold";color:#F00; display:inline; color: #dadada; font: 12/24px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0);  background: rgba(0, 0, 0, 0.7); padding: 8px; font-weight:bold;}

html应该是：

<div class="picturebox"><img src="images/001.jpg" width="192" height="192" alt="001" /><h4>aasim</h4><h5>AZAM</h5></div>

aasimAZAM

不明白为什么要使用position:relative；对于h4和h5标签

无论如何，试试下面的css代码，希望对你有用

h5 {
        color: #FF0000;
        float: left;
        font-family: "Futura Std ExtraBold";    
        padding: 8px;    
        width: auto;
    }


    h4 {
        color: #FF0000;
        float: left;
        font-family: "Futura Bk BT";    
        padding: 8px;   
        width: auto;
    }

---

除非您更改H4和H5的css:）