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>已被视为标题，它们总是放在一个新行上。

如果您不打算使用这些标题（您不喜欢这样），请不要使用h<n>标记。如果必须，请将display: inline;放入<h4>和<h5>样式的CSS中。

Answer 2

试试这个：

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>

Answer 3

没有得到你使用职位的原因：亲属;对于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;
    }

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

3 个答案: