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

Question

我在图片上有一个叠加条，里面有文字，

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>

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

我该如何修复此代码，使文本在同一行和跨度上并具有不同的字体？或者还有其他方法吗？

Answer 1

这与跨度无关，<h4>和 <h5>已经被认为是标题，它们总是放在一个新行上。

如果您不打算将这些作为 header (它不喜欢您这样做)，请不要使用 h<n>标签。如果必须，请输入 display: inline;在你的 CSS 中 <h4>和 <h5>样式。