Font-лица качества шрифта проблемы (Firefox, Chrome, Opera)

Question

Проверьте сайт:

http://tinyurl.com/caljnqb

Я использую шрифт лицо:

@font-face { 
    font-family: 'SegoeUI'; 
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf') format('truetype'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg'); 
    font-style: normal; 
    font-weight: normal; 
    } 
@font-face { 
    font-family: 'SegoeUIBold'; 
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf') format('truetype'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg'); 
    font-style: normal; 
    font-weight: bold; 
    } 
@font-face { 
    font-family: 'SegoeUIItalic'; 
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf') format('truetype'), 
     url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg'); 
    font-style: italic; 
    font-weight: normal; 
    } 

И есть проблема с вывода в браузерах Firefox, Chrome и Opera. Все выглядит нормально в IE. Шрифт выглядит острый. Почему это происходит? Может быть, я делаю что-то не так?

Answer 1

различные браузеры визуализируют шрифты по-разному.

Решение, которое я использовал в прошлом, состоит в том, чтобы переупорядочить порядок, в котором шрифты предоставляются на шрифт, на основе того, какой браузер выполняет рендеринг страницы. Обычно мои проблемы находятся в более ранних версиях IE, поэтому я использовал отдельную таблицу стилей, которая предлагала файл .woff перед файлом ttf. Поскольку некоторые браузеры могут читать только определенные типы шрифтов, но могут читать оба и перестать искать после поиска того, что работает. Если вы переустановите их, вы сможете использовать тот, который немного улучшится.

Если вы в конечном итоге используете отдельный css, вы можете использовать свойство http_user_agent массива $ _SERVER для установки шрифта css на основе браузера.

googles Шрифт Droid - это шрифт, который иногда смешно влияет на браузер и поэтому исследует, что может помочь вам найти другие подходы.

Answer 2

Кажется, что есть несколько трюков в заказе правильно каждый формат

Смотрите, например

Это пуленепробиваемый синтаксис Fontspring изменен, чтобы служить SVG первый:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
} 

От http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Вы также можете позаботиться о использовании надлежащего типа мима для WOFF шрифта, так как из http://www.w3.org/TR/WOFF/#appendix-b

application/font-woff 

для обеспечения надлежащего обращения с браузером