Углубленный анализ базовых принципов проектирования

внешний интерфейс Интерактивный дизайн CSS

Предисловие: Baseline — это одно из самых основных свойств CSS, которое используют многие разработчики интерфейса На первый взгляд оно кажется очень простым, но на самом деле Baseline можно рассматривать как одно из самых глубоких свойств CSS. Если вы мне не верите, продолжайте читать.

содержание

  • размер шрифта

    • Тот же размер шрифта, разная высота
    • как делаются шрифты

  • Расположение базовой линии

    • Базовое положение для различных отображаемых значений
    • По значению вертикального выравнивания поймите значение атрибута родственного элемента базовой линии.

1. Размер шрифта

(1) Размер шрифта тот же, но высота разная.

Начнем с простого примера:

<p>
    <span style="font-family:Catamaran;font-size:100px;">MO</span>
    //Catamaran就是Google字体库中的原生
    <br>
    <span style="font-family:Catamaran-special;font-size:100px;">MO</span>
    //Catamaran是在原生的基础上做了尺寸改动（只改动了布局，没改动字体设计风格，你就权当是一种新的字体)，文章会有说明。
</p>

Единственная разница между двумя спанами в этом фрагменте кода — это разница в семействе шрифтов.Давайте посмотрим на результаты их работы:

Здесь выберите текст, и вы обнаружите, что размер шрифта одного размера установлен на тот же размер.Почему появляется разница в высоте?

Далее нам нужно понять значение каждого параметра в vertical-align: (top, text-top, middle, baseline, text-bottom, bottom и т.д.) Текст слишком абстрактный, просто посмотрите на (диаграмма параметров):

Сумма информации на этой картине относительно большая, мы понимаем один за другим:

Во-первых, крайне важно понять, почему в случае, показанном на рисунке 100, возникает феномен разной высоты шрифта :(:? Первый диапазон высоты текста равен 164, а второй был высотой 100) хочу разобраться эта проблема, вы должны выяснить, из чего сделан шрифт. Поскольку дизайн шрифта не является нашей основной работой сегодня, мы будем использовать хороший дизайн шрифта других людей непосредственно в инструментах дизайна шрифта. (Важно то, что мы используем шрифт Catamaran. Вы можете найти этот шрифт https://github.com/qrpike/Web-Font-Load в библиотеке шрифтов Google)

(2) Как сделан шрифт

Затем вы посмотрите, как создан шрифт, вам нужно понять, что инструмент FontForge, как вы заинтересованы в изучении, вы можете ссылаться на ссылку (1) быстрое запуск. Открываем шрифты шрифта в этом инструменте (O одинаково).

При разработке дизайна шрифта он не является неожиданно спроектированным в диапазоне между верхним и нижним 1000 динамиками (размерами шрифта). Мы поставили вышеуказанные Mo из нового инструмента FONTFORGE, чтобы проверить это.

Я считаю, что прочитав эту картинку, вы должны понять истинное значение font-size, но пока у вас может возникнуть вопрос: почему шрифт Catamaran имеет высоту 100px?164 px? На этом этапе некоторые люди могут захотеть изучить fontforge, поэтому вот подробный справочник по использованию fontforge:дизайн со шрифтом forge.com/this-cn/index…

@font-face {
       		 font-family: 'hhabnormal';
       		 src: url('./fontfamily/Catamaran.ttf') format('truetype');
   		 }

Продолжаем решать проблему 164 пикселей по сторонам 100px. Далее давайте сравним собственный Catamaran со шрифтами в инструменте fontforge (вы можете использовать следующий код, чтобы попробовать свои собственные шрифты на веб-странице)

Сравнив верхнее и нижнее изображения, вы обнаружите, что 164 пикселя больше, чем 100 пикселов, что на самом деле является местом, где есть два знака вопроса над и под размером шрифта. Так к чему же относятся эти два вопросительных знака? Сравнивая карту параметров, упомянутую выше, вы обнаружите, что есть такая область, HHead/Win Ascent, Эти два параметра также определяются при разработке шрифта. Невозможно изменить то, что вы хотите, с помощью CSS. Здесь мы также используем изображения для сравнения, потому что сравнение с изображениями может сделать вас ясным с первого взгляда. Давайте посмотрим, что именно сделано с родным шрифтом Catamaran, чтобы он так сильно отличался по высоте от родного шрифта Catamaran.

Может быть сложно понять его истинное значение, просто взглянув на параметры, поэтому мы все же разберем на примерах. Мы помечаем эти параметры в шрифт один за другим.

Сравнив карту параметров и посмотрев на картинку выше, можно быстро понять, почему установлен один и тот же размер шрифта, но показана разная высота. Верхняя часть на самом деле:

?(вверху на картинке)=Win/HHead Ascent - Введите Ascent.

?(нижняя часть картинки)=Win/HHead Descent - Type Descent.

Здесь необходимо сделать пояснение: Win Ascent используется в системе windows. HHead Ascent используется в системе Mac. По сути, ценность обоих одинакова, когда дизайнер занимается проектированием. Причина, по которой их две, заключается в том, что существуют две основные системы, и они не следуют одному и тому же стандарту совместимости.

Итак, давайте теперь рассчитаем размер шрифта: 100px, высота 164px, высота 100px Причина:

164px=Win/HHead Ascent(11px) +Win/HHead Descent(54px);

100px=Win/HHead Ascent(77px) +Win/HHead Descent(23px);

2. Местоположение базовой линии

(1) Базовое положение различных отображаемых значений

После решения вышеуказанного вопроса о размере шрифта родился новый вопрос: все ли элементы отображаемого типа имеют базовую линию? Если такой элемент, как встроенный блок, имеет несколько строк текста, должен ли он основываться на базовой линии первой строки текста или на базовой линии второй строки текста? Например, как показано ниже:

В такой модели блока div есть две строки текста, так какой строкой должна быть ее базовая линия? Зачем это выяснять? Потому что элементы display:inline;display:inline-block; выравниваются по базовой линии. Если вы не знаете, где находится базовая линия элемента, который вы пишете, это означает, что где появится следующий элемент, который вы пишете, вы вообще не знаете. Посмотрите на картинку и вы все поймете.

Вы найдете, но без стандарта мировоззрения расположение предметов будет казаться непривычно хаотичным. Поэтому в настоящее время очень важно понять, где находится базовая линия display:inline:display:inline-block;display:block;. Далее рассмотрим следующие ситуации:

(1) Базовый уровень отображения: встроенный

Изучив описанные выше шрифты, мы можем узнать, что базовая линия встроенных элементов (таких как span, label, i и т. д.) является базовой линией шрифта элемента. Это различные базовые линии в первом разделе.Когда несколько разных встроенных элементов размещаются на одной строке, достаточно выровнять несколько базовых линий, точно так же, как приведенное выше «МО» с разными размерами шрифта выравнивается по базовой линии. то же самое.

(2) Базовая линия отображения: встроенный блок

Давайте рассмотрим пример:

<div style="display:inline-block;width:100px;height:100px;word-wrap:break-word;
background-color: hsl(2, 86%, 58%);color:#fff;">
    <span>
        MOMOMOMOMOMOMOOMOM
    </span>
</div>
<span style="color:#fff">MOMO</span>

Посмотрим на результаты операции:

Из рисунка видно, что базовая линия элемента div — это последняя строка строчного элемента, который он содержит в качестве собственной базовой линии. Следующий элемент в той же строке выровняет базовую линию с этой базовой линией div. Итак, все display:inline-block; такие? Что делать, если нет встроенного элемента, такого как img? Давайте посмотрим на другой пример.

<img src="http://chuantu.biz/t6/62/1506246890x3752257483.png" alt="" style="background-color:hsl(2, 86%, 58%);
height:100px;width:100px;">
<span style="color:#fff">MOMO</span>

Взгляните на беговые результаты:

Видно, что базовой линией img является его нижний край. На самом деле, увидев это, мы, вероятно, можем сделать некоторые выводы, которые являются базовыми для элемента display:inline-block;. Когда есть встроенный элемент, это базовая линия встроенного элемента, а когда нет встроенного элемента, это самая нижняя сторона. Это правильно? Скажу вам: в основном правильно. Если вы мне не верите, давайте взглянем на определение базового уровня встроенного блока, данное W3C:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

(3) Базовая линия отображения: блок

Поскольку блочный элемент сам по себе занимает строку, ему вообще не нужна базовая линия, поскольку он считает, что ему не нужно выравниваться с какими-либо элементами впереди или позади него.

(2) По значению вертикального выравнивания понять смысл значения родственного атрибута базовой линии.

Диаграммы параметров выше достаточно, чтобы все объяснить, за исключением того, что она не охватывает менее часто используемые атрибуты, такие как sub и super, остальные почти полностью покрыты. Каждое значение один в один соответствует приведенному выше графику параметров, поэтому я не буду говорить об этом больше.

Использованная литература:

1. Простой учебник FontForge:Woohoo.YouTube.com/watch?V=l Jr…

2.Deep dive CSS: font metrics, line-height and vertical-align IA MV OH. EH / EN / BLOG / CSS ...


Категории