Мы работаем над большим принт-приложением с тысячами шрифтов. Исторически, они были показаны с использованием Flash, но, очевидно, мы сейчас изучаем HTML5.Вертикальное положение WOFF по сравнению с OTF/TTF/SWF?
Подмножество шрифтов WOFF отображает вертикальное смещение вниз на несколько пикселей - это, по-видимому, не зависит от преобразователя. (Я пробовал более дюжины конверсий WOFF и все отображали одинаковое позиционирование.)
Очевидно, что в затронутых шрифтах есть что-то, что заставляет WOFF отображаться вертикально вниз от положения OTF/TTF/SWF. Может ли кто-нибудь указать мне ссылку, которая могла бы объяснить, что?
Спасибо, G
ETA: После комментариев ниже, я редактировал это включить MCVE.
Выбранный пример демонстрирует, как шрифт ClarendonNo1URW-Lig отображает небольшое количество пикселей ниже, где можно было бы ожидать, используя тот же шрифт вне браузера.
Синие прямоугольники на скриншоте связаны иллюстрации границы, которые, как ожидаются, опрашивая шрифт в положение между базовым последней строкой и подъемом первой линии - в соответствии InDesign позиционирования дисплея.
Все значения позиционирования вычисляются явно из этих значений высоты восходящего/нисходящего потока и были проверены на более чем 1000 шрифтов - они пиксель идеально подходит для более чем 90% шрифтов, но некоторые (например, пример) смещены вертикально вниз ,
Кроме того, это явление появляется последовательно через различные браузеры - подобное поведение наблюдается в FireFox, Edge, Opera, Chrome ...
Это не кажется, преобразователь зависит - я попытался почти десятки конвертеров из онлайн-ttf в сервисы woff для приобретенного программного обеспечения, включая TransType и т. д. Обмен WFF с исходным 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>
Это .... вопрос не имеет смысла. WOFF буквально представляет собой байт-байт без потерь сжатого шрифта OpenType. Позаботьтесь о том, чтобы добавить более подробную информацию, [mcve] (/ help/mcve), конкретные шрифты, информацию об отладке консоли браузера, что угодно, что позволяет людям, занимающимся OpenType и веб, понять, в чем вы работаете? –
Извините, но это не имеет никакого смысла, однако поддерживается подтвержденным наблюдением; из 1000 шрифтов 900 + отображать вертикально выровнены с тем, что я ожидал бы по сравнению с публикацией на рабочем столе с использованием не-веб-шрифта. Но остаток заметно смещается (обычно вниз) на несколько пикселей. Это для идентичного кода с линией в html, установленном в 0, чтобы устранить другие эффекты. Я посмотрю на предоставление MCVE, но это, очевидно, усложняется запатентованной природой шрифтов. –
start simple: выберите шрифт, напишите веб-страницу с одним абзацем, которая использует этот шрифт в форме opentype с помощью '@ font-face', и снова с тем же шрифтом, но через« профессиональные »инструменты преобразования WOFF (конвертер woff google, FontForge и т. Д.). Если вы не можете распространять шрифт, скажите, какой из них вы использовали (поскольку люди могут его владеть), покажите используемый вами код (html + css), скриншот и покажите результат для нескольких разных браузеров, скажите, какие инструменты вы использовали для конверсии, а затем у вас есть вопрос с большим количеством информации и подробностей. –