Мы работаем над большим приложением для печати с тысячами шрифтов. Исторически они отображались с помощью 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>
@font-face, и снова с тем же шрифтом, но с помощью профессиональных инструментов преобразования WOFF (конвертер Google woff, FontForge и т. д.). Если вы не можете распространять шрифт, скажите, какой из них вы использовали (потому что он может принадлежать людям), покажите код, который вы использовали (html + css), сделайте снимок экрана и покажите результат для нескольких разных браузеров, скажите, какие инструменты вы использовали для преобразование, и тогда у вас есть вопрос с хорошим объемом информации и подробностей. - person Mike 'Pomax' Kamermans schedule 16.04.2016