Как установить ширину и высоту символов?Ширина и высота символа
<span>></span>
что > не достаточно широк:
span {
font-family:arial;
font-size:20px;
}
Можно ли установить его с кодом, как width: 10px; height: 20px;?
> - персонаж. Вы можете отрегулировать его размер с помощью font-size и font-stretch (хотя это has limited support).
Имейте в виду, что ширина зависит от семейства шрифтов.
(Будьте осторожны, чтобы не использовать больше, чем символ, когда вы на самом деле хотите стрелку.)
+1 для 'font-stretch'! – xec
Да, и ни один из распространенных браузеров не поддерживает свойство font-stretch :) – Atrox111
font-stretch, скорее всего, не имеет никакого эффекта или мало. Меньше стандартных шрифтов имеют разные грани. И интерполяция из браузеров - скажем, субоптимальная. – Christoph
использование CSS контента дублировать символ и расположить их очень немного от центра, запрещенного контента ... на самом деле вы можете используйте сгенерированный контент здесь различными способами для достижения желаемого решения, я просто выбрал этот, чтобы сделать свою мысль. просто повторно тем больше, чем подписывать с помощью символов Юникода и перемещать их до нужного размера, как и
span{width:75px; height:75px; text-align:left; font-size:75px; position:relative}
span:before,span:after{color:#008000; font-size:75px; font-weight:900; text-shadow:1px 1px 2px #000; position:absolute; width:75px; height:75px; top:0; z-index:100}
span:before{content:"\003C"; left:-3px}
span:after{content:"\003C"; right:-3px}
используя ту же разметку, показанную в вопросе; рабочая демонстрация: http://jsfiddle.net/jalbertbowdenii/khAr3/1/
Вопрос заключается в изменении размера символа, а не размера окна ... и это даже не меняет размер поля, так как 'span' (по умолчанию)' display: inline' so 'height' и 'width' не применяются. – Quentin
Исходный '' 'отлично. Это '' 'имеет особое значение в этом контексте. – Quentin
С другой стороны, лучше избегать '' 'в содержании элементов, так как это может вызвать путаницу для читателей. (Человеческие читатели, которые есть.) –
Нет, вы не можете изменить ширину и высоту отдельно, и это по уважительной причине. Шрифты (и это включает в себя символы) также не растягиваются. Сделав это, вы получите искаженный и уродливый символ и заставите всех экспертов типографии кричать, как ад. Именно по этой причине вы можете установить только одно значение - аспектный рацион всегда останется неизменным. Это для нас вся безопасность.
Это невозможно установить ширину символа, но ...
немного небрежно решения: почему бы не попробовать с другим шрифтом? Вы можете найти несколько широких шрифтов в Google Fonts (под «широкий» фильтр), и сделать что-то вроде этого:
span.wide {
font-family:"wide font";
font-size:20px;
}
Плюсы: Кросс-браузер, минимальный код, нет изображения.
Против: Использование многих шрифтов может замедлить вашу веб-страницу.
Установите размер шрифта 20px, а затем используйте свойство transform, используя scale(.5, 1), чтобы уменьшить шкалу по горизонтали и уменьшить вертикальную шкалу.
span {
font-size:20px;
transform: scale(.5, 1);
}
или см. fiddle.
Встроенные элементы, такие как промежуток не может иметь ширину и высоту - так что вы должны использовать 'дисплей: встроенный-block', а если вы желаете, чтобы они вступили в силу. – CBroe
Да, но преобразование символа '>', чтобы сделать его более широким, невозможно, изменив размер диапазона. Просто создайте изображение и внесите его в свой код html. – Atrox111
Вместо этого вы должны использовать фоновое изображение. или просто изображение. –