Заметки по практике HTML, CSS, JS
November 8
Emoji, Glyphs : разница есть…
Эмодзи и глифы действительно отображаются по-разному на уровне браузера, и это объясняет, почему часть стилей, применимых к текстовым символам, не всегда работает с эмодзи.
Разница между эмодзи и глифами
- Эмодзи (например,
🔔
🔔) - Это изображения, встроенные в шрифты или представленные как векторные/растровые изображения (PNG/SVG) в некоторых реализациях.
- Эмодзи обычно отображаются цветными в большинстве современных систем (iOS, Android, Windows, macOS), что вызывает сложности с их стилизацией.
- Они работают как inline-элементы, но их цвет не изменяется, так как браузеры отображают эмодзи как цветные изображения по умолчанию, а не как простые текстовые символы.
- Глифы (например,
␇
⏣) - Глифы представляют собой символы из Unicode, которые отображаются в виде векторных форм, содержащихся в шрифте.
- Глифы легко стилизуются через
color
,font-size
,text-shadow
и другие CSS-свойства, так как они обрабатываются как обычный текст. - Поддерживают полное управление стилем (цвет, размер, обводка и т.д.) и более предсказуемо ведут себя на всех платформах.
Как это работает на уровне WebKit (или другого браузерного движка)
- Отображение символов: Браузер, получая символ Unicode (будь то эмодзи или глиф), использует встроенные шрифты системы или загруженные веб-шрифты, чтобы отобразить его.
- Эмодзи как изображения: Для цветных эмодзи браузеры часто обращаются к системе, чтобы использовать встроенные цветные эмодзи-шрифты, такие как Apple Color Emoji на iOS/macOS или Segoe UI Emoji на Windows. Эти шрифты содержат изображения эмодзи в формате растровых данных, встроенных в шрифт, поэтому они не поддерживают стандартные текстовые стили.
- Глифы: Обычно представлены монохромными формами в обычных шрифтах, например Arial или Times New Roman. Они обрабатываются как текст, позволяя полное управление их стилем через CSS.
Причины различий в стилизации
- Цветные шрифты и формат: Эмодзи-шрифты используют цветные форматы (например, SVG-in-OpenType, CBDT/CBLC, COLR/CPAL), которые ограничивают CSS-стилизацию.
- Поддержка браузерами: WebKit, Blink, Gecko и другие движки специально поддерживают отображение эмодзи в цвете, хотя это часто ограничивает возможности их стилизации. Глифы из простых текстовых шрифтов стилизуются проще, так как они рендерятся в черно-белом виде.
Принцип отображения дополнительных символов
- Система и шрифты: При запросе символа браузер сначала проверяет активные шрифты (веб-шрифты, затем системные) на наличие нужного символа.
- Порядок шрифтов: Если символ найден в шрифте, он отображается оттуда. Если символ — эмодзи, браузер будет использовать цветной эмодзи-шрифт, если он поддерживается.
- Отображение как изображения: Цветные эмодзи обрабатываются как растровые данные, встроенные в шрифты. Это позволяет воспроизводить их как изображения, но ограничивает стилизацию.
- Глифы и их рендеринг: Глифы отображаются как обычный текст, что позволяет менять их цвет, размер, добавлять обводки и т.д.
Подытожим
- Эмодзи: Используются как растровые или векторные изображения, встроенные в цветные шрифты, и ограничены в стилизации.
- Глифы: Обрабатываются как текст и полностью поддерживают CSS-стили.
Чтобы стилизация (цвет и т.д.) работала, лучше использовать символы из обычных шрифтов (например, глифы), а не эмодзи.