Как правильно использовать и понимать единицы измерения ширины ch в CSSHtml

Программисты Html
Ответить
Anonymous
 Как правильно использовать и понимать единицы измерения ширины ch в CSS

Сообщение Anonymous »

Недавно, на прошлой неделе, я наткнулся на новую единицу CSS "ch". Я не видел ее раньше ни в одном из учебных пособий, которые я посещал, или на веб-сайтах, которые я проверял и пытался найти информацию о ней, но, честно говоря, кажется, так мало информации о ней и о том, как ее правильно использовать.
MDN описывает ее как "Предварительную меру (ширину) глифа "0" шрифта элемента".
/>Из этого я понимаю, что ширина единицы ch равна ширине «0» в шрифте и размере этого элемента. Я также понимаю, что это работает лучше всего прямо из коробки с моноширинными шрифтами, поскольку ширина каждого символа такая же, как у «0», но с пропорциональными шрифтами, где ширина каждого символа разная, может потребоваться дополнительный бит, чтобы заставить его работать так, как вы ожидаете.
В одной статье, которую я нашел, упоминается, что с пропорциональным шрифтом вы можете установить ширину текстового контейнера, например, 45ch, а затем проверить как ширину контейнера, так и ширину текста, вы можете затем взять ширину контейнера, разделить ее на ширину текста, взять этот ответ и изменить ширину контейнера так, чтобы она была в 45 раз больше, и тогда это будет учитывать несоответствие и работать по назначению. Хотя этот ответ будет зависеть от используемого семейства шрифтов, в моем случае использования семейства шрифтов «Playfair Display» уравнение, которое мне нужно было для достижения ширины 45 каналов, заключалось в том, чтобы сделать ширину «45 каналов * 0,9696». До сих пор это работало, и я надеюсь, что это правильный подход, если есть другой способ упростить работу с пропорциональными шрифтами, мне было бы интересно узнать.
Тогда я понимаю, что идеальный символ ширина строки текста находится где-то между 45 и 75, поэтому возникла идея использовать ограничение для ширины контейнера с минимальной шириной 45 каналов и максимальной с 75 каналами, чтобы всегда достигать идеальной ширины для контейнера с текстом, но у меня все еще есть несколько проблем и несколько вопросов о единицах измерения ch.
  • При сохранении ограничения, как в этом случае мне следует выбирать предпочтительное значение масштабирования зажима? Я видел в Интернете примеры, когда люди просто используют проценты, но я не уверен, как они получают число для своих процентов и что работает лучше всего.
  • При меньших размерах экрана, что, если 45 каналов все еще слишком широки для контейнера и вызывают переполнение, как бы вы это компенсировали?
  • Я понимаю, как упоминалось выше, что единица ch - это на основе ширины нуля в шрифте элемента, но чему он будет равен, если элемент, на который вы его поместите, содержит несколько шрифтов, например, ширина элемента div в ch, но элемент div содержит два разных абзаца текста, в каждом из которых используется разное семейство шрифтов, какой тогда будет ширина ch?
На вопрос 2 При попытке сделать ширина элемента абзаца — «clamp(45ch, 90%, 75ch)» (я также выбрал 90% случайным образом, потому что до сих пор не понимаю, как вы выберете предпочтительное значение), когда ширина страницы становится слишком маленькой, как в моем случае, около ширины экрана 360 пикселей, текстовый контейнер переполнит страницу. Я понимаю, почему это так, потому что он больше не будет сжиматься после 45 каналов, но я зашел в тупик с проблемой: мне нужно, чтобы оно подходило, но мне нужно, чтобы оно не было меньше 45 каналов в строке. Я также использую фиксатор для своего размера шрифта. Я подумал, что, возможно, изменение минимального размера шрифта позволит ему соответствовать этому маленькому размеру экрана, но это не сработало.
Что касается вопроса 3, я также попробовал во время экспериментов, установив «max-width: 75ch» для элемента абзаца, а затем решив, что хочу, чтобы весь контейнер div был «max-width: 75ch», но получил совершенно другой результат по ширине, который был намного меньше, чем в первом тесте, я не могу понять, почему он должен быть меньше, если на всей странице используется одно и то же семейство шрифтов, но в контейнере div также есть элементы заголовка, и мне интересно, привело ли это к другому результату?
Я надеюсь, что эти вопросы достаточно кратки, я всю неделю пытался изучить статьи и видео, но не могу найти ответ на некоторые из них, я не чувствую, что использую ch правильно или эффективно, поскольку я немного новичок в концепция плавная типографика. Если есть какая-либо дополнительная информация или разъяснения, которые я могу предоставить, дайте мне знать. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/756 ... dth-in-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»