Font size перевод: Font-size – перевод с английского на русский – Яндекс.Переводчик
em vs. px vs. pt vs. percent / Хабр
Одним из наиболее запутанных аспектов
CSSявляется применение
font-sizeатрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
Знакомьтесь — единицы
1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера).
Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии.
Изменение Font-size от 100% до 120%.
Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» vs «%»
Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body).
Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно.
При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
Победитель: процент (%).
List font size — Английский
Компьютерный перевод
Обучается переводу с помощью примеров, переведенных людьми.
English
Russian
Информация
Переводы пользователей
Добавлены профессиональными переводчиками и компаниями и на основе веб-страниц и открытых баз переводов.
Добавить перевод
Английский
Русский
Информация
Английский
Русский
Типографский пункт
Последнее обновление: 2012-12-03
Частота использования: 1
Источник: Wikipedia
Английский
Русский
Типографский пункт
Последнее обновление: 2012-12-21
Частота использования: 1
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2013-07-03
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2013-07-03
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2013-07-03
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-10-22
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-10-31
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-11-01
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-11-15
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-11-16
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-11-16
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Типографский пункт
Последнее обновление: 2012-11-16
Частота использования: 1
Качество:
Источник: Wikipedia
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2014-01-28
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2014-05-13
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2016-10-03
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2013-11-14
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2016-12-23
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2016-12-23
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2017-03-17
Частота использования: 1
Качество:
Источник: Translated.
com
Английский
font size
Русский
Размер шрифта
Последнее обновление: 2017-03-21
Частота использования: 1
Качество:
Источник: Translated.
com
Получите качественный перевод благодаря усилиям
4,401,923,520 пользователей
Сейчас пользователи ищут:
Для Вашего удобства мы используем файлы cookie. Факт перехода на данный сайт подтверждает Ваше согласие на использование cookies. Подробнее. OK
font-size — Какой размер шрифта перевести точно?
В «шрифт» из шрифта относится к шрифту’ы «и высота их», который не’т обязательно то же самое как высота отдельных символов в шрифте.
Обычно ЭМ высоты шрифта придерживается той же основной идее — это’ll быть ориентировочно установлен на расстоянии от нижнего выносных (например, нижней части буквы Г) до самого высокого надстрочного элемента (например, верхней части буквы H):
Как вы видите, ни одна из отдельных букв охватывают весь период.
Цифровые шрифты, в «Высота их» из шрифт-это выбор, сделанный дизайнером шрифта, и не должны соответствовать этой конвенции на всех: дизайнер цифрового типа может выбрать любую основу для их размера ЭМ. Однако, шрифтов все равно стремятся соблюдать, хотя бы примерно, в такой, описанной выше. В старые времена, когда типа состоял из металлических блоков, в «их высота” был разгар одной из тех блоков, которые должны быть достаточно высокими не только для любого символа в этом шрифте, но и для любого восходящие, нисходящие, и акценты.
Сейчас, многие современные гарнитуры включают в себя акценты на заглавные буквы (так как Ć) — эти акценты продлить внешнего традиционного типографские жумар и таким образом эти (и возможно другие специальные символы) выходят за пределы верхней части и»ЭМ» по.
По историческим причинам мы не’t отрегулируйте их размер, чтобы позволить этим, мы сохраняем их размер и только эти выходящие из него — любой типограф, используя такие акценты будут должны убедиться, что есть место для них, чтобы расширить в, Хотя обычно линия разрыва адекватное в теле текста.
В разрыв линии в тексте-это пространство, оставленное между спусковое одной строки текста и жумар линии под ним — то есть в «шрифт» не включать эту линию разрыва измерений. Он может быть под влиянием CSS в поле высота строки, где1.4` означает, что линия разрыва является 0,4-кратной их высоты, а значит, всю линию текста будет занимать в 1.4 раза больше их высоты, включая линии разрыва. В других приложениях линия разрыва может быть определен по-разному: текстовые процессоры часто указывается в условиях множественного и»один и» междустрочный интервал, но в отличие от в CSS, как правило, на «один» в разнос не означает нет линии разрыва, но какая-то «по умолчанию» по линии разрыва, когда приложение пытается придумать умолчанию на основе метаданных в файл шрифта.
Существует несколько стандартов для определения метрик шрифта (например, в формате TrueType, имеются разные Mac и Windows стандартами/ОС2) так что разрыв линии по умолчанию могут меняться в зависимости от приложений и операционных систем.
Теперь, даже если дизайнер делает ** следовать предсказуемой конвенции за их высоты, это еще не’т скажу вам размер букв (шапка-высота), или размер, скажем, о (х-высота или средней линии), как они могут свободно отличаться между шрифтами в отношении жумар высоту. В пределах одного семейства шрифтов, они, как правило, будет хоть последовательны. Так, например, Таймс Нью Роман жирный и «Таймс Нью Роман» регулярно будут иметь одинаковые размеры знаков для того же размера, который должен включать восходящие, нисходящие, шапка-высота и высота.
Таблица соответствия размеров шрифтов в CSS
Не важно каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимость посмотреть, какое значение соответствует текущему в другой системе единиц (например, какому размеру в px или %, будет соответствовать шрифт, размером 1.
4 em) или быстро перевести одни размеры в другие.
Чтобы это было просто, предлагаю держать для таких случаев перед глазами (или в закладках) следующую таблицу соответствия размеров шрифтов.
| Pt | Px | Em | % |
|---|---|---|---|
| 6 | 8 | 0.5 | 50 |
| 7 | 9 | 0.55 | 55 |
| 7.5 | 10 | 0.625 | 62.5 |
| 8 | 11 | 0.7 | 70 |
| 9 | 12 | 0.75 | 75 |
| 10 | 13 | 0.8 | 80 |
| 10.5 | 14 | 0.875 | 87.5 |
| 11 | 15 | 0.95 | 95 |
| 12 | 16 | 1 | 100 |
| 13 | 17 | 1. 05 |
105 |
| 13.5 | 18 | 1.125 | 112.5 |
| 14 | 19 | 1.2 | 120 |
| 14.5 | 20 | 1.25 | 125 |
| 15 | 21 | 1.3 | 130 |
| 16 | 22 | 1.4 | 140 |
| 17 | 23 | 1.45 | 145 |
| 18 | 24 | 1.5 | 150 |
| 20 | 26 | 1.6 | 160 |
| 22 | 29 | 1.8 | 180 |
| 24 | 32 | 2 | 200 |
| 26 | 35 | 2.2 | 220 |
| 27 | 36 | 2.25 | 225 |
| 28 | 37 | 2. 3 |
230 |
| 29 | 38 | 2.35 | 235 |
| 30 | 40 | 2.45 | 245 |
| 32 | 42 | 2.55 | 255 |
| 34 | 45 | 2.75 | 275 |
| 36 | 48 | 3 | 300 |
Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body в 16px.
Обновление от 23.05.2015: для более детального понимания единиц измерения в CSS появился визуальный сервис CSS Ruler
Ссылки
ВКонтакте
Одноклассники
Telegram
ПоделитьсяChrome CSS Firefox Internet Explorer Opera Safari Документация Юзабилити
font-size | CSS | WebReference
Определяет размер шрифта элемента.
Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Краткая информация
| Значение по умолчанию | medium |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
font-size: <абсолютный размер> | <относительный размер> | <размер> | <проценты>Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | Нет |
|---|---|---|---|---|---|---|---|---|
| HTML | 1 | Нет | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
За 100% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font-size</title> <style> h2 { font-family: ‘Times New Roman’, Times, serif; /* Гарнитура текста */ font-size: 250%; /* Размер шрифта в процентах */ } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; /* Размер шрифта в пунктах */ } </style> </head> <body> <h2>Амазонская низменность</h2> <p>Для гостей открываются погреба Прибалатонских винодельческих хозяйств, известных отличными сортами вин «Олазрислинг» и «Сюркебарат».
</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
Объект.style.fontSize
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
CSS3 | Высота шрифта
Высота шрифта
Последнее обновление: 21.04.2016
Для установки размера шрифта используется свойство font-size:
div{
font-size: 18px;
}
В данном случае высота шрифта составит 18 пикселей.
Пиксели представляют наиболее часто используемые единицы измерения. Чтобы задать значение в пикселях, после самого значения идет сокращение «px».
Если к тексту явным образом не применяется высота шрифта, то используются значения браузера по умолчанию. Например, для простого текста в параграфах это 16 пикселей. Это базовый стиль текста.
Базовый стиль для разных элементов текста отличается: если для параграфов это 16 пикселей, то для заголовков h2 это 32 пикселя, для заголовков h3 — 24 пикселя и т..д.
Для измерения шрифта также можно использовать самые разные единицы измерения.
Ключевые слова
В CSS имеется семь ключевых слов, которые позволяют назначить размер шрифта относительно базового:
medium: базовый размер шрифта браузера (16 пикселей)
small: 13 пикселей
x-small: 10 пикселей
xx-small: 9 пикселей
large: 18 пикселей
x-large: 24 пикселя
xx-large: 32 пикселя
Например:
font-size: x-large;
Проценты
Проценты позволяют задать значение относительно базового или унаследованного шрифта.
Например:
font-size: 150%;
В данном случае высота шрифта будет составлять 150% от базового, то есть 16px * 1,5 = 24px
Наследование шрифта может изменить финальное значение. Например, следующую ситуацию:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты в CSS3</title>
<style>
div {font-size: 10px;}
p {font-size: 150%;}
</style>
</head>
<body>
<div>
<p>Однажды в студеную зимнюю пору</p>
</div>
</body>
</html>
Здесь элемент p наследует от контейнера — блока div шрифт высотой в 10 пикселей. То есть 10 пикселей теперь будет базовым для параграфа.
Далее для элемента p определяется новая высота шрифта в 150%. Это значит, что финальная высота будет равна 10px * 1,5 = 15px.
Единица еm
Единица измерения еm во многом эквивалентна процентам. Так, 1em равен 100%, .5em равно 50% и т.д.
Неизвестное свойство font-size-adjust – Zencoder
При создании CSS-правил сталкивались ли вы с ситуацией, когда при откате (fallback) шрифта у последнего менялась пропорциональность и текст начинал выглядеть больше или меньше оригинального?
Возможно, новое замечательное свойство из стандарта CSS3 поможет нам исправить ситуацию?
Что делает свойство font-size-adjust
Первое, что нужно сделать — это использовать браузер Firefox для того, чтобы страница с примером отображалась правильно. Да, не Safari, а только Firefox!
Свойство позволяет установить оптимальный коэффициент пропорциональности при использовании отката шрифта; если шрифт-заменитель имеет коэффициент пропорциональности, отличающийся от такого же коэффициента у главного шрифта, высота текста (которая приблизительно равна размеру буквы этого шрифта в нижнем регистре) останется неизменной.
Давайте рассмотрим рисунок ниже:
Как видим на рисунке, шрифт Baskerville и Georgia имеют разный коэффициент пропорциональности. Если произойдет замещение шрифта (с учетом того, что шрифт Baskerville является главным), то в реальности размер шрифта визуально будет больше, при одинаковой величине.
Прим. переводчика. Еще раз — своими словами. На картинке видно, что одинаковые буквы А размером 320 пикселей у шрифта Baskerville и у шрифта Georgia на самом деле не одинаковые. Пропорции (о которых говорит Inyaili) букв у этих шрифтов разные! Теперь вспомним, как задается обычно шрифт в CSS-правилах.
К примеру, так:
font: bold 12px/18px Baskerville, Georgia, serif;или же так:
font-family: Baskerville, Georgia, serif;То есть, в правилах мы устанавливаем сначала главный шрифт Baskerville, который должен отображаться на странице; и вспомогательный шрифт Georgia, который должен отображаться, если браузер не найдет главный шрифт Baskerville (это и есть откат шрифта, о котором упоминается в этой статье).
В принципе — это основы CSS .
Теперь, если принимать во внимание картинку “Сравнение двух шрифтов”, то нетрудно представить, что произойдет при такой замене (откате).
Шрифт Baskerville заменится шрифтом Georgia, у обоих при этом в правилах CSS установлена одинаковая высота в 320 пикселей. Но фактическая высота (точнее — пропорции) вспомогательного шрифта Georgia больше, чем у первостепенного Baskerville! Догадайтесь, что произойдет с готовым дизайном страницы при таком откате?
При использовании свойства значение свойства для шрифта-заменителя будет разделено на значение .
Не путайте свойство со свойством 1
-webkit-text-size-adjust
Как определить значение свойства font-size-adjust
Отрывок из спецификации W3C однозначен:
Коэффициент пропорциональности для выбранных шрифтов может быть высчитан путем сравнения одного и того же текста, но с разным значением
.подобрано верно, то при одинаковом размере шрифта текст останется неизменным для всех используемых на странице шрифтов.
Если значение свойства Ниже я собираюсь на примере повторить вышесказанное. Давайте посмотрим на следующий код, в котором имеется параграф с двумя .
p{
font-family: Times New Roman;
font-size: 400px;
}
span{
border: 1px solid #ff0000;
}
.adjust{
font-size-adjust: 0.5;
}<p>
<span>a</span>
<span>a</span>
</p>Оба элемента наследуют свойство от своего родителя (элемента ), но второй элемент также имеет еще и свойство , заданное через класс , значение которого выбрано наугад — .
Если вы откроете страницу примера, то взгляните на образец слева: высота красных квадратов не совпадает — значение свойства подобрано неверно.
У вас все квадраты на странице примера имеют одинаковую высоту? Что я говорила?
После нескольких экспериментов я выбрала значение .
И CSS-код, создающий второй пример (расположенный на странице справа).
p{
font-family: Times New Roman;
font-size: 400px;
}
span{
border: 1px solid #00ff00;
}
.adjust{
font-size-adjust: 0.455;
}Если вы снова перейдете на страницу примера, то обнаружите, что квадраты с зелеными границами имеют одинаковую высоту (прим. переводчика — у меня они имели не совсем одинаковую высоту) — то есть теперь у нас величина свойства для выбранных шрифтов установлена верно.
Пример работы свойства font-size-adjust
Для того чтобы показать, как в действительности работает свойство для текста, мною был создан следующий пример.
На этой странице состоит из следующих шрифтов: Calibri, Lucida Sans и Verdana (именно в этом порядке шрифты должны отображаться на странице в окне браузера).
Браузер Safari генерирует эту страницу следующим образом:
А вот так генерирует эту страницу браузер Firefox:
Как видите, браузер Firefox поддерживает одинаковую x-высоту () букв в зависимости от того, какой шрифт используется.
Мною не рассматривался вопрос выравнивания текста (свойство ), так как цель этой статьи была показать, каким образом свойство может быть применено для сохранения целостности и удобочитаемости текста.
Кроме того, даже не смотря на то, что первый блок имеет корректный font stack, мне пришлось вручную прописывать в правилах шрифты Lucida Sans и Verdana для остальных блоков . Так что вы (и я) можете заметить разницу несмотря на то, что установлены все три шрифта.
Заключение
Догадываюсь, что использование свойства в конечном счете имеет только негативное применение. Но этот вопрос может быть заголовком уже другой статьи, цель же этой — просто пример использования достаточно малоизвестного CSS3-свойства, которое может быть полезным в некоторых случаях.
Признаюсь, что я не тестировала свойство в реальных условиях, поэтому была бы рада услышать ваши отзывы по этому поводу. Данное свойство на сегодняшний день поддерживается только браузером Firefox версии от 1.
0 до 3.0.
У Inyaili de Leon есть еще одна интересная статья, которую планируется мною прочитать — “Будущее CSS типографики” (The Future Of CSS Typography) на малоизвестном ресурсе для дизайнеров Smashing Magazine.
Примечание переводчика: интересная, как и всегда, у девушки получилась статья. Для меня свойство
вообще было открытием. Помимо этого, есть масса других статей (в том числе русскоязычных) на тему, но эта мне показалась самой лучшей, так как автор не лениться пробовать на практике те вопросы, которые описывает в статье. Сделал перевод в меру своих сил, поэтому могут быть неточности, конечно.
Оригинал статьи расположен по адресу — “The Little Known font-size-adjust CSS3 Property”.
font-size-adjustcss
Размер текста в переводе
Размер текста в переводе При переводе текста с одного языка на другой длина исходного и переведенного текста, скорее всего, будет отличаться.
Есть
некоторые способы, которыми эти различия в длине могут быть систематическими.
В этой статье представлены справочные материалы, в которых кратко рассматриваются некоторые из этих систематических различий. Другие статьи будут посвящены конкретные последствия для дизайна веб-страниц и предлагаемых решений.
В общем, чем гибче вы можете спроектировать свой макет, тем лучше. Разрешить перекомпоновку текста и избегать небольших контейнеров фиксированной ширины или тесные сжимания, где это возможно. Будьте особенно осторожны при подгонке текста к графическому дизайну. Разделите представление и содержание, чтобы шрифт размеры, высота строки и т. д. могут быть легко адаптированы для переведенного текста. Вы также должны помнить об этих идеях при проектировании ширины полей базы данных в длины символов.
Текст на английском и китайском языках, как правило, очень компактен, и текст, переведенный с этих языков, обычно будет длиннее в переводе.
чем оригинал — иногда до тревожной степени.
Например, пользовательский интерфейс Flickr недавно был переведены на несколько языков. Одно из наиболее распространенных сообщений, когда вы смотрите на свои фотографии, говорит вам, сколько раз страница с фотографией был просмотрен, например. «392 просмотра». В следующей таблице показаны сравнительные длины слова Flickr, используемого для обозначения «просмотров», как отношение* к исходному. Английский:
| Язык | Перевод | Соотношение |
|---|---|---|
| Корейский | 조회 | 0.8 |
| Английский | просмотра | 1 |
| Китайский | 次檢視 | 1,2 |
| Португальский | визуализации | 2,6 |
| Французский | консультации | 2,6 |
| немецкий | -mal angesehen | 2. 8 |
| итальянский | визуализации | 3 |
Расширение на 300% с английского на итальянский совсем не удивительно для такой маленькой строки, как эта. Ниже приведены средние ожидаемые коэффициенты расширения для текста, переведенного с английского на европейские языки, опубликованные IBM в Руководстве по разработке глобальных решений .
| Количество символов в английском источнике | Среднее расширение |
|---|---|
| До 10 | 200–300% |
| 11–20 | 180–200% |
| 21–30 | 160–180% |
| 31–50 | 140–160% |
| 51–70 | 151-170% |
| старше 70 лет | 130% |
Общее сообщение состоит в том, что текст обычно расширяется, но обратите внимание, что чем меньше исходное сообщение, тем выше вероятность
длина перевода.
Конечно, это верно не для каждой строки или сообщения, но когда это так, вы должны иметь какой-то способ с этим справиться. Например, Фликр переводит «FAQ» как «FAQ» на немецком и французском языках, но как «Perguntas freqüentes» на португальском и «Preguntas frecuentes» на испанском.
Проблема, как правило, заключается в том, что чем меньше английский текст, тем больше вероятность того, что он будет втиснут в небольшое пространство, например, рядом с поле ввода формы, или внутри изображения, или набор вкладок с ограниченной шириной и т. д.
Имейте также в виду, что расширение текста не является исключительно проблемой пользовательских интерфейсов с исходным текстом на английском и китайском языках. Если
ваш исходный текст на испанском языке, термин «Idioma de la interfaz» будет меньше на английском языке («Интерфейс
языке»), но намного длиннее на малайском («Bahasar pegantar untuk penelusuran»). Кроме того, меньшие переводы могут быть
так же проблематично, как и большие, если они оставляют слишком много пустого места на странице.
При работе с абзацами текста относительное расширение, скорее всего, будет меньше, но все же могут быть некоторые моменты, которые следует учитывать.За например, сможете ли вы разместить все, что хотели, «в верхней части сгиба»? Будут ли элементы по-прежнему выравниваться так, как вы хотите, если они растут вниз в разные расценки?
Помимо непредсказуемости количества символов в результате перевода, существуют и другие факторы, усложняющие управление расположением текста.
Составные существительные
В ряде языков, таких как финский, немецкий и голландский, создаются отдельные большие «слова» для замены последовательности более мелких слов. на других языках.
Например, английское «Возможности обработки ввода» может стать «Eingabeverarbeitungsfunktionen» в
Немецкий. Принимая во внимание, что английский текст может быть легко перенесен на две строки там, где доступна ограниченная ширина, например, рядом с полем ввода формы,
или в ряду вкладок или кнопок, или в узких столбцах немецкий язык может не переноситься автоматически и может создать проблемы для вашего макета.
Ширина символа
Китайский, японский и корейский алфавиты, среди прочих, обычно имеют более сложные символы, чем латинские. сценарий.Это может означать, что даже если количество символов в переводе остается прежним или даже немного меньше, необходимое горизонтальное пространство может быть намного больше.
Например, английское слово «рабочий стол» на японском языке становится «デスクトップ». У японцев на одного меньше характер, но обычно занимает гораздо больше места по горизонтали.
Высота символа и строки
Очень часто в нелатинском тексте символы намного выше, чем в латинском. Не только это, но эти сценарии часто требуют больше вертикального расстояния между строками, чем в латинском тексте.
Например, на рисунке ниже показан один и тот же текст на английском и тайском языках. Обратите внимание, что в каждом случае есть две линии, но вертикальная
пространство, занимаемое тайцами, намного больше.
Отчасти это связано со сложностью символов (что приводит к более высоким глифам и, следовательно,
увеличенная высота строки), но в тайском языке межстрочный интервал обычно больше, чем в латинском тексте. Есть множество скриптов
которые требуют гораздо большей высоты, чем латинский текст, включая арабский (особенно в шрифтах Nastaliq), китайский, деванагари (используется для хинди), японский, корейский, тибетский и т. д.
Дважды подумайте о аббревиатурах
Если вы сокращаете свой текст , чтобы он поместился в ограниченном пространстве , вам действительно следует подумать, хорошо ли это идея. Другие языки могут быть не в состоянии воспроизвести такую аббревиатуру, и при переводе может потребоваться увеличить текст.
Во многих языках аббревиатура встречается редко. Это может быть связано со стилем этого языка. В других случаях это может быть связано с более
практические заботы.Например, арабские «слова», как правило, состоят из очень компактных корней, основанных на шаблонах, с префиксами, суффиксами и маленькими буквами.
внутренние изменения, чтобы выразить точное значение. Может быть трудно сокращать, не теряя смысла.
(Обратите внимание, что вам может потребоваться предоставить переводчикам список расширений используемых вами сокращений.)
Преобразованиеpx в rem, если :root font-size равен 16px – Standardista
Если у вас
: корень {
размер шрифта: 16px;
} вы можете использовать следующую таблицу для преобразования PIXELS в REMS
| 10px | 0.625рем |
| 11px | 0,6875рем |
| 12 пикселей | 0,75 бэр |
| 13px | 0,8125рем |
| 14 пикселей | 0,875 бэр |
| 15px | 0,9375рем |
| 16px | 1рем |
| 17px | 1. 0625рем |
| 18px | 1.125рем |
| 19px | 1.1875рем |
| 20px | 1,25 бэр |
| 21px | 1.3125рем |
| 22px | 1.375рем |
| 23px | 1.4375рем |
| 24px | 1,5рем |
| 25px | 1.5625рем |
| 26px | 1.625рем |
| 27px | 1.6875rem |
| 28px | 1.75рем |
| 29px | 1.8125рем |
| 30px | 1. 875rem |
| 31px | 1.9375рем |
| 32px | 2рем |
| 33px | 2.0625рем |
| 34px | 2.125рем |
| 35px | 2.1875рем |
| 36px | 2,25рем |
| 37px | 2.3125рем |
| 38px | 2.375рем |
| 39px | 2.4375рем |
| 40px | 2,5рем |
| 41px | 2.5625rem |
| 42px | 2.625rem |
| 43px | 2.6875rem |
| 44px | 2,75рем |
| 45px | 2. 8125rem |
| 46px | 2.875рем |
| 47px | 2.9375rem |
| 48px | 3рем |
| 49px | 3.0625rem |
| 50px | 3.125rem |
| 51px | 3.1875rem |
| 52px | 3,25рем |
| 53px | 3.3125rem |
| 54px | 3.375rem |
| 55px | 3.4375рем |
| 56px | 3,5рем |
| 57px | 3.5625rem |
| 58px | 3. 625rem |
| 59px | 3.6875rem |
| 60px | 3,75рем |
| 61px | 3.8125rem |
| 62px | 3.875rem |
| 63px | 3.9375rem |
| 64px | 4рем |
Опубликовано
Эстель Вейл
Меня зовут Эстель Вейл.Я открытый веб-евангелист и инженер сообщества. Я консультирую веб-разработчика, пишу технические книги с O’Reilly, провожу семинары по интерфейсу и рассказываю о веб-разработке, производительности и других забавных вещах по всему миру. Если у вас есть какие-либо рекомендации по темам для меня, пожалуйста, дайте мне знать через @estellevw. Просмотреть все сообщения Эстель Вейл
размер шрифта — Перевод на английский — примеры китайский
Эти примеры могут содержать нецензурные слова, основанные на вашем поиске.
These examples may contain colloquial words based on your search.
span style＝» font-size ： 9pt»b任职类型/b：员工在公司担任的职务职位类型。br
spanbEmployment Type/b: job type of the employee in the company.brspan style＝» font-size ： 9pt； font-weight：700″相关参数说明
spanRelated Parameters Descriptionfont-family： ｀Microsoft YaHei｀； font-size ： ｀11｀；
span style＝｀ font-size ：12.0pt；color：#067180｀ 使用新闻组/span
span Using newsgroups/spanfont-family：»Simsun»； font-size ：1pt
span style＝» font-size ： 9pt»选择分析对象类型，分析对象和员工。
spanSelect analysis object type to analyze object and persons.
span style＝｀ font-size ：9.0pt；font-family：»微软雅黑»，»sans-serif»； color：#464545｀则标明此操作将作为数据权限使用权定义的业务场景。
spanit means that this operation will be used as the business scenario while defining data permission authorization.span style＝｀ font-size ：9.0pt； font-family：»微软雅黑»，»sans-serif»；color：#464545｀规则编辑器：
spanRule Editor:span style＝｀ font-size ：9.0pt；font-family：»微软雅黑»，»sans-serif»；color：#464545｀为了解决这个问题，为每个定义了使用权规则的档案或者单据建立一个分表。
spanTo solve this problem, a sub-table is created for each file or Doc with authorization rules defined.font-family：MS Yahei，Simsun，Verana，Tahoma，Helvetica，Sans-Serif； font-size ：80%；
font-family:Tahoma, Helvetica, Sans-Serif; font-size :75%; span style＝｀ font-size ：12.
0pt； color：#317E97；font-weight：normal｀ br 欢迎使用/span
button ｛ width：6.9em； height：2.1em； font-size ：100%； font-family：宋体； margin-right：15px； ｝
button {width:6.9em; height:2.1em; font-size :100%; font-family:MS Shell Dlg; margin-right:15px;}span style＝» font-size ： 9pt»评价活动管理：增加活动，设置评价方式，评价指标和评价活动范围之后就可以启动活动。
spanEvaluation activity management: add an activity, and set evaluation method, evaluation indicators and evaluation activity range to start the activity;span/strongspan style＝｀ font-size ：9.0pt；font-family：»微软雅黑»，»sans-serif»；color：#464545｀在元数据定义时，可以定义元数据操作。
span/strongspanMetadata operations can be defined together with metadata.
对表单和表格需要执行类似的工作，以使表单控件和表单元格继承合适的大小：INPUT，SELECT，TH，TD ｛ font-size ：1em｝。
A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size: INPUT, SELECT, TH, TD { font-size :1em}.gpotype｛ color：#333333； font-family：宋体； font-size ：100%； font-weight：bold； padding-left：11px； ｝
gpotype{color:#333333; font-family:MS Shell Dlg; font-size :100%; font-weight:bold; padding-left:11px;}1vh等于视口高度的1％， 1vw等于视口宽度的1％. 您可以使用这些单位调整框的大小，也可以调整文本的大小. 在下面的示例中，我们有一个框，其大小为20vh和20vw.该框包含一个字母A ，该字母的 font-size 为10vh.
1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width.
You can use these units to size boxes, but also text. In the example below we have a box which is sized as 20vh and 20vw. The box contains a letter A, which has been given a font-size of 10vh.head ｛ font-weight：bold； font-size ：160%； font-family：宋体； width：100%； color：#6587DC； background：#E3EAF9； border：1px solid #5582D2； padding-left：8px； height：24px； ｝
head {font-weight:bold; font-size :160%; font-family:MS Shell Dlg; width:100%; color:#6587DC; background:#E3EAF9; border:1px solid #5582D2; padding-left:8px; height:24px;}计算 （computed） 样式值是所有 CSS 规则和 CSS 继承都应用后的值，这是 CSS 级联（cascade）的结果。它看起来像 height：1em 或 font-size ：125%。
A computed style value is the value after all CSS rules and CSS inheritance is applied, as the result of the CSS cascade.
It can look like height:1em or font-size :125%.font face＝»Arial» style＝» font-size ： 9pt» 1、点击〖设置〗，在»单位编制分类方式»页签，系统支持按人员类别、按岗位序列、按职务簇、按职务保留及»按其他方式»分类。
font face=»Arial» 1 Click BSetup/B. In BCompany Headcount Classification Method/B tab, BBy Personnel Type/B, BBy Position Sequence/B, BBy Job Cluster/B, BKeep By Job/B and BBy Other Method/B classifications are supported.Потеряно при переводе размера шрифта
Начинать никогда не бывает легко, и создание хорошей основы для проекта является ключом к тому, чтобы избежать головные боли в дороге.
Вот почему армия CSS решила использовать относительные единицы для измерения типографики (и все остальное, кроме бордюров) разработать УС последней версии ШаблонFly.
Ремс
Мы измеряем размеры шрифтов в бэрах.
«значения rem относятся к корневому элементу html.
Сеть разработчиков Mozilla
Например, если для корневого html установлено значение 20px , то 1rem = 20 px .
Хитрость заключается в том, чтобы избежать жесткого кодирования размера шрифта для элемента html. Туда
1rem будет равен базовому размеру шрифта браузера. В большинстве случаев это 16px , но пользователи могут установить его больше или меньше, или браузеры могут иметь большее или меньшее значение.
меньший размер корневого шрифта в соответствии с его окружением.
При использовании rems иерархия типографики изменяется пропорционально настройка браузера.
Звучит потрясающе, правда? Ну… есть одна проблема.
Photoshop не может делать размеры шрифтов в бэрах. И когда визуальные дизайнеры предоставляют
макет с размером шрифта px нам нужно найти способ выразить его в rems .
Математика и Sass спешат на помощь
Если немного посчитать, перевод из px в rem не составит труда.
Сначала мы
создайте переменную, чтобы установить значение для корня. Мы не применяем это значение к какому-либо
элемент, он работает только как точка отсчета.
Поскольку базовый размер шрифта большинства браузеров равен 16px , то переменная font-size-root имеет вид 16 :
$font-size-root = 16; Допустим, визуальный дизайнер установил для h2 значение 24 пикселя. Если это уравнение верно [24 = 24/16 * 16], то верно и [24 = (24 / $font-size-root) * 1rem], поскольку $font-size-root и 1rem представляют одно и то же значение. Кроме того, поскольку (24 / $font-size-root) дает числовое значение 1,5 без единицы, умножение этого значения на 1rem дает единицу rem, что делает окончательный результат этого уравнения равным 1.5рем.
Формула дерзости получилась такой:
(24 / $font-size-root) * 1rem Собираем все вместе, это выглядит так:
$font-size-root: 16;
$h2-font-size: (24 / $font-size-root) * 1rem;
h2 { font-size: $h2-font-size } Это как обман
Мы используем эту технику для установки размеров шрифта, полей и отступов, и она
дали отличные результаты.
Это не обман, это обман.Это также лучший способ воспроизвести Изображение Photoshop в коде с сохранением преимуществ относительных единиц.
ОБНОВЛЕНИЕ 15 мая 2017 г.
Чтобы упростить задачу, я написал функцию Sass для перевода px в rem :
$font-size-root: 16; // Базовый размер шрифта большинства браузеров равен 16
@ функция px-to-rem ($ px) {
@return ($px / $font-size-root) * 1rem;
}
h2 { font-size: px-to-rem(24) } Приблизительное преобразование из точек в пиксели
Приблизительное преобразование точек в пиксели
(и Эмс и %)
Вот диаграмма, которая конвертирует точки в пиксели (а также ems и %).Это приблизительное значение, которое будет зависеть от шрифта, браузера и операционной системы, но это хорошая отправная точка.
| Очки | пикселей | Эмс | Процент |
|---|---|---|---|
| 6 точек | 8px | 0,5 мм | 50% |
| 7 точек | 9px | 0,55 мм | 55% |
| 7,5 точек | 10 пикселей | 0,625эм | 62,5% |
| 8 точек | 11px | 0. 7эм | 70% |
| 9 точек | 12 пикселей | 0,75 мм | 75% |
| 10 точек | 13px | 0,8 мм | 80% |
| 10,5 пт | 14 пикселей | 0,875эм | 87,5% |
| 11 точек | 15 пикселей | 0,95 мм | 95% |
| 12 точек | 16 пикселей | 1эм | 100% |
| 13 точек | 17px | 1.05em | 105% |
| 13,5 пт | 18 пикселей | 1.125em | 112,5% |
| 14 точек | 19px | 1,2 мм | 120% |
| 14,5 точек | 20 пикселей | 1,25 мм | 125% |
| 15 точек | 21px | 1,3 мм | 130% |
| 16 точек | 22px | 1,4 мм | 140% |
| 17 точек | 23px | 1. 45эм | 145% |
| 18 точек | 24px | 1,5 мм | 150% |
| 20 точек | 26px | 1,6 мм | 160% |
| 22 точки | 29px | 1,8 мм | 180% |
| 24 точки | 32px | 2эм | 200% |
| 26 точек | 35px | 2.2эм | 220% |
| 27 точек | 36px | 2.25эм | 225% |
| 28 точек | 37px | 2.3em | 230% |
| 29 точек | 38px | 2,35 мм | 235% |
| 30 точек | 40px | 2,45 мм | 245% |
| 32 точки | 42px | 2,55 мм | 255% |
| 34 точки | 45px | 2,75 мм | 275% |
| 36 точек | 48px | 3эм | 300% |
Размер шрифта текста—ArcMap | Документация
ArcGIS использует программно масштабируемые шрифты для отображения текста.
Это позволяет отображать метки, аннотации и текст карты в различных масштабах карты, сохраняя при этом их свойства отображения. Примером программно масштабируемого шрифта является Arial (Open Type).
При отображении текста реальная высота текстового символа зависит от шрифта. Типовой символ измеряется от вершины его выносной строки до нижней части его выносной строки:
Ячейка символа представляет собой рамку, которая окружает отдельный символ. Если текстовый символ не занимает всю высоту ячейки символа, символ будет отображаться меньше указанного размера точки.
Измерение размера шрифта текста с помощью точек
Пункт — это стандартная единица измерения высоты и ширины символов. Баллы можно вводить целыми и половинными размерами. Следующие преобразования можно использовать в качестве справочного руководства для размеров точек.
Таблица преобразования точек в дюймы
| очков | дюймов |
|---|---|
1 | 5|
12 (1 PICA) | 0. |
18 | 0,250″ |
24 | 0,332″ |
36 | 0,500″ |
72 (6 picas) | 1.000″ |
166″Связанные темы
Единицы размера шрифта CSS PX в PT, IN, EM, REM преобразование с помощью следующего преобразования размера шрифта 90
, Hi расчеты:
1 пиксель = 0.75 точек
1 точка = 1,3333 пикселя
1 пиксель = 0,010416666 дюймов
1 дюйм = 96 пикселей
Единицы размера шрифта Em и Rem относятся к другим размерам шрифта.
Em связан с размером шрифта родительского элемента. Rem связан с размером шрифта корневого элемента. Например, если размер родительского элемента 16 пикселей, то 1,5 em равно 24 пикселям. Когда размер корневого элемента равен 18px, то 1,5 rem равны 27px.
Чтобы преобразовать размеры шрифта, вы также можете использовать эту таблицу:
| пикселей | точек | дюймов | |||||
| 8 пикселей | 6 pt 6083333 в | ||||||
| 9 ПВ | 6,75 пт | 0,093750 в | |||||
| 9,33 ПВ | 7 пт | 0,097187 в | |||||
| 10 точек | 7,5 пт | 0,104166 в | |||||
| 10,66 рх | 8 pt | 0.111041 | 0.111041 в | ||||
| 11 px | 8.25 pt | 8.25 pt | 0.114583 в | ||||
| 12 px | 9 pt | 0.125000 в | |||||
| 13 PX | 9.75 пт | 0,135416 в | |||||
| 13,33 ПВ | 10 пт | 0,138854 в | |||||
| 14 точек | 10,5 пт | 0,145833 в | |||||
| 14,66 ПВ | 11 пт | 0,152708 в | |||||
| 15 px | 11. 25 pt | 0.156250 в | |||||
| 16 PX | 12 PT | 12 PT | 0.166666 в | ||||
| 17 PX | 12.75 PT | 0.177083 в | |||||
| 17.33 ПВ | 13 пт | 0,180520 в | |||||
| 18 точек | 13,5 пт | 0,187500 в | |||||
| 18,66 ПВ | 14 пт | 0,194375 в | |||||
| 19 точек | 14,25 пт | 0.197916 в | |||||
| 20 px | 15 pt | 0.208333 | |||||
| 21 px | 15.75 pt | 15.75 pt | 0.218750 в | 0.213 | 21.33 px | 16 pt | 0.222187 в |
| 22 ПВ | 16,5 пт | 0,229166 в | |||||
| 22,66 ПВ | 17 пт | 0,236041 в | |||||
| 23 ПВ | 17.25 пт | 0,239583 в | |||||
| 24 пикселей | 18 PT | 0.250000 в | |||||
| 25 PX | 25 PX | 18.  |