Використання .otf шрифтів у веб-браузерах

440

Я працюю над веб-сайтом, який вимагає випробування шрифтів в Інтернеті, усі шрифти у мене є .otf

Чи є спосіб вставити шрифти та змусити їх працювати у всіх браузерах?

Якщо ні, то які інші альтернативи у мене є?

— Наруто
джерело

Можливо, тут слід видалити JavaScript зі списку тегів?

— кж

754

Ви можете реалізувати свій OTFшрифт, використовуючи @ font-face так:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Однак , якщо ви хочете , щоб підтримувати широкий спектр сучасних браузерів я б рекомендував вам перейти WOFFі TTFтипів шрифтів. WOFFтип реалізується кожним головним настільним браузером, тоді як TTFтип - резервна версія для старих браузерів Safari, Android та iOS. Якщо ваш шрифт є безкоштовним шрифтом, ви можете конвертувати свій шрифт, використовуючи, наприклад, Інтернет- конвертор .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Якщо ви хочете підтримувати майже кожен веб-переглядач, який все ще знаходиться там (більше не потрібно IMHO), слід додати ще кілька типів шрифтів, таких як:

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

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

@ Підтримка веб-переглядача шрифту

Підтримка браузера EOT

Підтримка браузера WOFF

Підтримка браузера TTF

Підтримка браузера SVG-Fonts

сподіваюся, що це допомагає

— вибір
джерело

Він прекрасно працював майже у всіх браузерах ... Єдиний браузер, який не працював, це FireFox Linux ... Будь-яка пропозиція для цього ??

— Наруто

Зауважте, що якщо ви розміщуєте це на сервері Windows, ви повинні додати файл .otf як дійсний та наданий тип файлу. Єдиний спосіб зрозуміти, що це проблема - це перейти за посиланням на шрифт (якщо так, помилка 404). Ви можете тимчасово перейменувати на .ttf або навіть .html для тестування. Єдиними веб-шрифтами, які підтримуються IE, є формат WOFF. (Ні, про це теж ніколи не чули!)

— Генрік Ерландссон

Гей, як щодо виконавця цього типу шрифту? Це добре? Або інше краще?

— Енджі Азіз

Чи відсутні цитати ( ") у прикладах коду?

— steffen

Схоже, otf повинен працювати майже через весь форум. Caniuse.com/#search=otf

— Стівен

З прикладів каталогу шрифтів Google :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Це працює між веб-переглядачем з .ttf, я вважаю, що це може працювати з .otf. ( Вікіпедія каже, що .otf здебільшого сумісний з .ttf) Якщо ні, ви можете перетворити .otf у .ttf

Ось кілька хороших сайтів:

Хороший праймер:

http://www.alistapart.com/articles/cssatten
Інша інформація:

http://randsco.com/index.php/2009/07/04/p680

— кж
джерело