Установка ширины символов с помощью css
Мне нужно создать простой логотип css, и все в порядке, за исключением размера буквы. Требование - использовать шрифт verdana, но с широкими символами, как показано на изображении. Однако с текущим кодом они выглядят узкими. Есть ли способ добиться такого поведения без использования изображений?
Я не ищу промежуток между буквами, но как заставить сам персонаж занять определенное количество пикселей. Например, я хочу, чтобы буква t
имела размер шрифта 30px (высота) и удвоила стандартную ширину.
Широкое изображение:
![widecharacters]()
Стандартный логотип с кодом: ![Standard]()
Вот текущее форматирование логотипа:
.brand {
color: white;
display: block;
float: left;
font-size: 40px;
font-weight: 200;
margin-top: 5px;
margin-bottom: 5px;
padding: 27px 20px 13px 20px;
letter-spacing:2px;
text-transform: full-width;
background: #083D68;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-box-shadow: inset 4px -4px 13px 0 #333;
-webkit-box-shadow: inset 4px -4px 13px 0 #333;
box-shadow: inset 4px -4px 13px 0 #333;
}
Ответы
Ответ 1
То, что вы ищете, это transform:scale(x, y)
. Например:
-webkit-transform:scale(2.0, 1.0);
-moz-transform:scale(2.0, 1.0);
-ms-transform:scale(2.0, 1.0);
-o-transform:scale(2.0, 1.0);
transform:scale(2.0,1.0);
Вы должны указать его для всех браузеров, по крайней мере пока.
Изменить:
Я забыл связать мой jsfiddle.
Ответ 2
Ваш код-пример не похож на вес Verdana 700.
Выбор правильного
font-family: 'Verdana';
начертание шрифта: 700;
даст правильный результат, по крайней мере, на системах с установленной Verdana.