Встройте шрифт в веб-страницу

Хотя использование @ font-face по-прежнему не рекомендуется из-за отсутствия широкой поддержки, есть способ использовать пользовательские шрифты в современных браузерах (большинство из них). Однако не забудьте предоставить решение для резервного копирования для постепенной деградации в старых браузерах.

В любом случае, вы должны проверить это руководство для получения дополнительных сведений.

На самом деле это не то, что вы можете или должны делать. Большая часть Интернета остановилась на некоторых основных шрифтах (с засечками, без засечек и т. Д.), И решение остается за браузером. Вы можете указать несколько шрифтов и перейти на более раннюю версию браузера, если он недоступен:

font-family: Kingthings Italique, sans-serif

Это, вероятно, лучшая стратегия, если у людей есть шрифт, который он будет отображать, иначе он станет общим шрифтом.

AFAIK, встраивание шрифтов с использованием чистого CSS на самом деле не поддерживается большинством браузеров (пока).

Однако существуют и другие решения. Если вы не против использования javascript, посмотрите cufon , который использует SVG / VML для отображения любого шрифта в большинстве используемых сегодня веб-браузеров (даже IE6).

Прежде всего, попробуйте использовать абсолютные пути:

url('/Kingthings_Italique.ttf')

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />

Встраивание шрифтов с использованием CSS не должно работать в современных веб-браузерах. Точнее, встраивание шрифтов с использованием CSS было частью CSS2 и поддерживалось некоторыми браузерами, но было убрано в CSS2.1 (и фактически также удалено из текущей спецификации CSS2).

Ожидайте возвращения поддержки шрифтов в CSS3, когда браузеры начнут поддерживать это. Ожидается, что Firefox 3.5, Opera 10 и Safari будут поддерживать встраивание шрифтов в стиле CSS3 с использованием шрифтов TTF, в Chrome по какой-то причине нет поддержки Safari для встраивания шрифтов CSS3.

Ваша проблема с отображением шрифта в IE8 может быть связана с тем, что второе объявление font-face определяет то же семейство шрифтов, что и первое, и, таким образом, переопределяет его, но не объявляет никаких шрифтов eot, которые IE может использовать. .

Я предлагаю вам использовать одно определение font-face, например:

@font-face 
{
    font-family: 'Kingthings Italique';
    src: local('Kingthings Italique Regular'),
         local('KingthingsItalique-Regular'),
         url('Kingthings_Italique.eot'),
         url('Kingthings_Italique.ttf') format('truetype');
}

Затем IE может сначала попробовать использовать шрифт eot. Другие браузеры (но, по-видимому, не Chrome) попытаются использовать eot, затем вернитесь к рендерингу ttf. Это, конечно, предполагает, что IE может обрабатывать определение «альтернативных источников», в чем я не уверен - документация @ font-face в MSDN не ссылается на это.

Я думаю, у вас должно быть только одно объявление @ font-face с множеством источников для одного семейства шрифтов. Похоже, IE не нравится ваше объявление. Код из упомянутой статьи ( http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding ):

@font-face {
        font-family: " your FontName ";  
        src: url( /location/of/font/FontFileName.eot ); /* IE */  
        src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  

/* THEN use like you would any other font */  
.yourFontName {
        font-family:" your FontName ", verdana, helvetica, sans-serif;  
}

Первый источник должен быть для файла EOT. Второй источник должен быть для файла TTF и начинаться с имени локального шрифта. Это какой-то взлом. Второй атрибут источника выглядит недопустимым для IE, поэтому этот браузер использует первый. Для других браузеров оба действительны, однако используется только последний.

Для преобразования файлов TTF в EOT я использовал эту небольшую программу: http://code.google.com/p/ttf2eot/

Метод должен поддерживаться следующими браузерами:

• Firefox 3.6 +
• Internet Explorer 4 +
• Opera 10.00 +
• Chrome 4.0 +
• Safari 3.1 +

Я провел несколько тестов, и они у меня сработали. Chrome 2, вероятно, слишком стар.