MDN описывает ее как "Предварительную меру (ширину) глифа "0" шрифта элемента".
/>Из этого я понимаю, что ширина единицы ch равна ширине «0» в шрифте и размере этого элемента. Я также понимаю, что это работает лучше всего прямо из коробки с моноширинными шрифтами, поскольку ширина каждого символа такая же, как у «0», но с пропорциональными шрифтами, где ширина каждого символа разная, может потребоваться дополнительный бит, чтобы заставить его работать так, как вы ожидаете.
В одной статье, которую я нашел, упоминается, что с пропорциональным шрифтом вы можете установить ширину текстового контейнера, например, 45ch, а затем проверить как ширину контейнера, так и ширину текста, вы можете затем взять ширину контейнера, разделить ее на ширину текста, взять этот ответ и изменить ширину контейнера так, чтобы она была в 45 раз больше, и тогда это будет учитывать несоответствие и работать по назначению. Хотя этот ответ будет зависеть от используемого семейства шрифтов, в моем случае использования семейства шрифтов «Playfair Display» уравнение, которое мне нужно было для достижения ширины 45 каналов, заключалось в том, чтобы сделать ширину «45 каналов * 0,9696». До сих пор это работало, и я надеюсь, что это правильный подход, если есть другой способ упростить работу с пропорциональными шрифтами, мне было бы интересно узнать.
Тогда я понимаю, что идеальный символ ширина строки текста находится где-то между 45 и 75, поэтому возникла идея использовать ограничение для ширины контейнера с минимальной шириной 45 каналов и максимальной с 75 каналами, чтобы всегда достигать идеальной ширины для контейнера с текстом, но у меня все еще есть несколько проблем и несколько вопросов о единицах измерения ch.
- При сохранении ограничения, как в этом случае мне следует выбирать предпочтительное значение масштабирования зажима? Я видел в Интернете примеры, когда люди просто используют проценты, но я не уверен, как они получают число для своих процентов и что работает лучше всего.
- При меньших размерах экрана, что, если 45 каналов все еще слишком широки для контейнера и вызывают переполнение, как бы вы это компенсировали?
- Я понимаю, как упоминалось выше, что единица ch - это на основе ширины нуля в шрифте элемента, но чему он будет равен, если элемент, на который вы его поместите, содержит несколько шрифтов, например, ширина элемента div в ch, но элемент div содержит два разных абзаца текста, в каждом из которых используется разное семейство шрифтов, какой тогда будет ширина ch?
Что касается вопроса 3, я также попробовал во время экспериментов, установив «max-width: 75ch» для элемента абзаца, а затем решив, что хочу, чтобы весь контейнер div был «max-width: 75ch», но получил совершенно другой результат по ширине, который был намного меньше, чем в первом тесте, я не могу понять, почему он должен быть меньше, если на всей странице используется одно и то же семейство шрифтов, но в контейнере div также есть элементы заголовка, и мне интересно, привело ли это к другому результату?
Я надеюсь, что эти вопросы достаточно кратки, я всю неделю пытался изучить статьи и видео, но не могу найти ответ на некоторые из них, я не чувствую, что использую ch правильно или эффективно, поскольку я немного новичок в концепция плавная типографика. Если есть какая-либо дополнительная информация или разъяснения, которые я могу предоставить, дайте мне знать. Спасибо.
Подробнее здесь: https://stackoverflow.com/questions/756 ... dth-in-css
Мобильная версия