Вертикальное положение WOFF по сравнению с OTF / TTF / SWF?
Мы работаем над крупным приложением для печати с тысячами шрифтов. Исторически они отображались с использованием Flash, но, очевидно, мы сейчас изучаем HTML5.
Подмножество шрифтов WOFF отображается вертикально смещенным вниз на несколько пикселей - это, по-видимому, не зависит от преобразователя. (Я перепробовал более десятка конверсий WOFF, и все они имеют одинаковое расположение.)
Очевидно, что в затронутых шрифтах есть что-то, что заставляет WOFF отображаться вертикально вниз от позиции OTF / TTF / SWF. Кто-нибудь может указать мне ссылку, которая может объяснить что?
Спасибо г
ETA: Следуя комментариям ниже, я отредактировал это, чтобы включить MCVE.
Выбранный пример демонстрирует, как шрифт ClarendonNo1URW-Lig отображает небольшое количество пикселей ниже, чем можно было бы ожидать при использовании того же шрифта вне браузера.
Синие прямоугольники на связанном скриншоте иллюстрируют границы, которые ожидаются при запросе шрифта к положению между базовой линией последней строки и подъемом первой строки - в соответствии с позицией отображения InDesign.
Все значения позиционирования вычисляются явно из этих значений подъема / опускания шрифта и были проверены по более чем 1000 шрифтов - они идеально подходят для пикселей более чем на 90% шрифтов, но некоторые (например, пример) смещены вертикально вниз.
Кроме того, этот феномен выглядит одинаково для разных браузеров - подобное поведение наблюдается в FireFox, Edge, Opera, Chrome...
Похоже, это не зависит от конвертера - я перепробовал почти дюжину конвертеров из онлайнового ttf в woff-сервисы для приобретенного программного обеспечения, включая TransType и т. Д. Замена WOFF на оригинальный TTF или OTF (в зависимости от ситуации) не устраняет проблему, так что, вероятно, что-то в самом файле оригинального шрифта намекает браузеру на отображение внизу. Но я понятия не имею, что или как сделать запрос, чтобы учесть то же самое.
Пример проблемы с отображением HTML-страницы приведен ниже. Использование lineheight 0 и абсолютного позиционирования диапазонов позволяет исключить эффекты эффектов округления, специфичных для браузера-рендерера, которые в противном случае делают насмешку над любой попыткой создания идеального пиксельного макета шрифта.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
@font-face {
font-family: 'ClarendonNo1URW-Lig';
src: url('/assets/compiled_fonts/ClarendonNo1URW_Lig.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
img {
width:3000px;
transform-origin:0 0;
}
p {
width:3000px;
background-color:#00AEEF;
margin:0;
position:relative;
}
span {
line-height:0px;
color: #000000;
position: absolute;
}
</style>
</head>
<body>
<h1>As displayed by HTML</h1>
<div id="paraToStyle" style="text-align:left; ">
<p style="height: 226.8px;" id="bobParent">
<span id="bobToStyle" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 36px;">Net netted nets nest nests stents N e t n s l y L</span>
<br>
<span id="bobToStyle2" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 122.4px;">hairdressing Sillily Lloyds of Lyana LYANG</span>
<br>
<span id="bobToStyle3" style="font-family: ClarendonNo1URW-Lig; font-size: 72px; top: 208.8px;">Better BETTER fet Fetter Gest Fest</span>
</p>
</div>
<br>
<h1>As exported from InDesign</h1>
<img style="transform: scale(1, 1);" src="/fontImages/ClarendonNo1URW_Lig.png" id="paraImageFromInDesign">
</body>
1 ответ
Вам, вероятно, нужно пересмотреть это с помощью инструмента, который исправляет вертикальные метрики для Mac/PC. (например, Fontsquirrel)
Так как это происходит во всех браузерах, это похоже на проблему, описанную в этой теме: Mac или проблема визуализации высоты шрифта в браузере Windows.
Другой вариант через командную строку, кажется, возиться с конфигурацией TTX через FontTools