Есть ли способ импортировать шрифт большего или меньшего размера по сравнению с другими шрифтами?
Я работаю над сайтом, который использует один шрифт для большинства локалей, в Японии сайт использует определенный шрифт для японских символов, оба импортируются с использованием правила @font-face и управляются с помощью стека шрифтов, латинский шрифт не содержит японских символов поэтому вместо него используется японский шрифт.
@font-face {
font-family: "Latin-font";
src: url("./latin-font.woff") format("woff");
}
@font-face {
font-family: "Japanese-font";
src: url("./japanese-font.woff") format("woff");
}
body {
font-family: "Latin-font", "Japanese-font", sans-serif;
}
Эти символы часто смешиваются на сайте, например, у нас может быть текст: Fooフーbarバー. Наши дизайнеры заметили, что из-за используемых нами шрифтов размер латинских символов непропорционален японским. Они хотели бы, чтобы все латинские символы отображались на сайте немного крупнее.
Вот наглядный пример того, что они хотели бы:
Для этого я завернул латинские символы в span, что работает здесь для демонстрации, но с количеством отдельных участников сайта было бы невозможно добиться этого в масштабе. Вместо этого было бы лучше, если бы шрифты были импортированы определенного размера, если это возможно.
Я пробовал просматривать документацию MDN и пробовал несколько прототипов с такими свойствами, как font-stretch и font-variation-settings, но мне не удалось сделать один шрифт больше другого.
Есть ли способ добиться этого? Единственный вариант, который я вижу прямо сейчас, - это обновить сам файл шрифта, увеличив размер каждого символа.
Ответы 2
Вы пробовали rem как единицу размера шрифта на всем сайте?
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: "Latin-font", "Japanese-font", sans-serif;
font-size: 1rem;
font-weight: 400; /* or your font-weight */
}
/* font-size relative to the root, for example */
#header h1 {
font-size: 2.5rem;
}
Я думаю, вы уже проделали хорошую работу по оценке этого. Вы могли бы:
- выберите семейство шрифтов, предназначенное для обработки как японских, так и латинских глифов, или
- попробуйте создать языковые
spanв коде как часть вашей CMS или процесса сборки, или - попробуйте изменить сам шрифт, если ваша лицензия это позволяет
Опция 1
Если на сайте, над которым вы работаете, будет много текста на японском и латинском языках, лучшим способом решить эту проблему, вероятно, будет переход на семейство шрифтов, которое может обрабатывать как латинский, так и японский языки. Тогда такие вещи, как метрики веса и высоты строки, также будут совпадать в дополнение к относительному размеру глифов.
Вариант 2
Font-size-adjust был предназначен для такого рода ситуаций, но на практике он действительно работает только в Firefox на рабочем столе на момент написания: https://caniuse.com/font-size-adjust Страница MDN немного вводит в заблуждение, так как для большинства браузеров он находится за флажком функции.
Даже когда это поддерживается, вам все равно могут понадобиться spans, как вы это описали.
В зависимости от вашей CMS или процесса сборки вы можете попробовать сделать это с помощью такой библиотеки: https://github.com/patrickschur/language-detection
Ваша ситуация также похожа на этот ответ, где вы хотите различать только конечное количество языков: https://stackoverflow.com/a/22403736
Используя их, вы будете генерировать нужные вам span, и вашим авторам не придется думать об этом.
Вариант 3
Попробуйте изменить сам шрифт, если ваша лицензия это позволяет. Возможно, вам придется открыть для этого специальный вопрос, так как это будет сильно зависеть от формата исходных файлов, к которым у вас есть доступ. В качестве примера, вот краткое описание того, что хотелось бы сделать эту модификацию в FontForge. Это также зависит от наличия доступа к исходным файлам с лицензией с открытым исходным кодом для шрифтов или другой лицензией, позволяющей создавать производные работы.
Спасибо, похоже, вы пришли к тому же выводу, что и я. Добавление новых инструментов в наш процесс сборки не вариант, на сайте, над которым я работаю, работают тысячи инженеров, работающих с несколькими процессами сборки и языками программирования, поэтому вариант 2 не сработает. Обновление шрифта кажется лучшим вариантом, однако я думаю, что стоит посмотреть на доступность смешанных языков, чтобы понять, стоит ли нам снова подумать об опции span, чтобы мы могли включить атрибут lang, чтобы помочь программам чтения с экрана.
Пожалуйста, перечитайте вопрос, это не решает проблему