Нестабильный шрифт специальный стиль

Question

Я внедрил собственный шрифт в html-файле, используя css, но шрифт не загружается одинаково в разных браузерах. Конкретная проблема, с которой я столкнулась, связана с поведением шрифта, последнее слово слова получает особый эффект. Здесь я покажу вам сравнение Opera/Firefox:

Могу ли я специальный эффект работы в обоих браузерах?

EDIT:

Я в основном следовал этому ТПИ, так как я не знаю, как использовать пользовательские шрифты: https://www.youtube.com/watch?v=AYNL_VY5m0Y

CSS: 

@font-face{ 
    font-family: 'custom'; 
    src: url('Hipster Script Pro.otf'); 
} 


.classname { 

    font-family: 'custom'; 
    font-size: 30px; 
    LINE-HEIGHT:20px; 
    margin-top: 25px; 
    margin-bottom: 15px; 
    color: #303030; 
    text-align: center; 
} 

Answer 1

Не видя код или данные шрифта, то трудно сказать, конечно, но принимая точные данные о шрифтах, но разные браузеры: скорее всего, то, что вы видите, является результатом функций OpenType. По умолчанию разные браузеры имеют разные эффекты. Я предполагаю, что этот шрифт имеет функцию «контекстных альтернатив», которая преобразует слово-final 's' в другую форму (длинный хвост, в верхнем примере).

Если это действительно функции OpenType в игре, вы можете управлять поведением с помощью CSS font-feature-settings.

UPDATE После анализа данных шрифта, на самом деле это вопрос: шрифт определяет («») CALT функцию контекстной Alternates в его OpenType Layout таблиц. Эта функция включена по умолчанию в некоторых браузерах и операционных системах, что приводит к отображению длинного хвоста. В других случаях он выключен, что приводит к короткому замыканию.

Вы можете управлять этой функцией вкл/выкл с помощью CSS, как описано here, хотя support еще не совсем универсален.

В некоторой степени связанный момент: я бы рекомендовал удалить ссылку на файл шрифта; это коммерческий/не-FLOSS-шрифт, и вы, вероятно, не можете свободно распространять его таким образом. Вы также можете дважды проверить, что ваша лицензия на шрифт позволяет использовать его как webfont (@ font-face).