Как сделать текст на одной строке другим шрифтом, не используя лишние divs?

Question

Как сделать текст на одной строке другим шрифтом, не используя лишние divs?

0

У меня есть накладываемый штрих на изображении и текст внутри него,

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>

проблема в том, что пролет на двух разных линиях?

как я могу исправить этот код, чтобы текст находился в одной строке и пробел и имел разные шрифты? Или есть другой способ сделать это?

Aasim Azam 17 фев. 2014, в 10:46

Источник

Теги:

html

css

3 ответа

0

попробуй это:

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>

RealDeepak 17 фев. 2014, в 07:47

0

Не понял, почему вы используете позицию: 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;
    }

Sarath 17 фев. 2014, в 07:00

Ещё вопросы

Flynn1179 · Accepted Answer · 2014-02-17T07-45-00.000Z

Это не связано с пролетами, <h4> и <h5> уже считаются заголовками, которые всегда помещаются в новую строку.

Если вы не намереваетесь, чтобы они были заголовками (что вам не нравится), не используйте теги h<n>. Если вам нужно, поставьте display: inline; в css для стилей <h4> и <h5>.