2017-01-09 3 views
0

Для демонстрации в режиме онлайн (проект) я хочу сделать вид ЖК-дисплея. Я нашел прекрасный шрифт 7сегмента https://fontlibrary.org/en/font/segment7. Одним из его факторов является то, что десятичная точка использует какой-то «отрицательный кернинг» (или буквенный интервал, пожалуйста, извиниться за отсутствие терминологии), поэтому он визуально относится к предыдущему числу. Это желаемое поведение.Какая функция тестирования в поддержке шрифтов IE/Edge?

Однако это поведение работает только в FF & Chrome, а не в Крае/IE ( см https://jsfiddle.net/jan_koupil/o1c8srt1/2/)

@import url(//fontlibrary.org/face/segment7); 
#display { 
    font-family: 'Segment7Standard', sans-serif; 
    font-size: 30px; 
    border: 1px solid black; 
    padding: 3px 5px 1px; 
    width: 142px; 
    text-align: right; 
} 
… 
<div id="display">8.8.8.8.8.8.8.8.</div> 

Для этих браузеров мне нужно переключить шрифт другого варианта или, по крайней мере, уменьшить шрифт размер, чтобы вписаться в дисплей с фиксированным размером DIV. Моя проблема в том, что все рекомендуют тестировать функции, а не версии браузера, но я не знаю, какую функцию проверить.

ответ

0

Это может быть из-за отсутствия кернинга в Internet Explorer. См. this answer о том, как явно добавить кернинг в текстовый рендеринг для IE. Вы также можете проверить другие функции Opentype и то, как они активируются с помощью CSS.

+0

спасибо, явное дополнение кернинга помогает. Однако, в общем, я все еще не уверен, как тестировать поддержку и грамотно деградировать. –

Смежные вопросы