Używanie czcionek .otf w przeglądarkach internetowych

440

Pracuję na stronie internetowej, która wymaga prób czcionek online, wszystkie czcionki, które mam, to .otf

Czy istnieje sposób na osadzenie czcionek i uruchomienie ich we wszystkich przeglądarkach?

Jeśli nie, jakie inne alternatywy mam?

— Naruto
źródło

Może javascript powinien zostać usunięty z listy tagów tutaj?

— kzh

754

Możesz zaimplementować OTFczcionkę za pomocą @ font-face, takiego jak:

@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");
}

Jeśli jednak chcesz obsługiwać szeroką gamę nowoczesnych przeglądarek , zalecamy przełączenie na typy czcionek WOFFi TTF. WOFFTyp jest implementowany przez każdą większą przeglądarkę stacjonarną, podczas gdy TTFtyp jest rezerwowy dla starszych przeglądarek Safari, Android i iOS. Jeśli twoja czcionka jest czcionką bezpłatną, możesz ją przekonwertować za pomocą na przykład konwertera online .

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

Jeśli chcesz obsługiwać prawie każdą przeglądarkę, która wciąż tam jest (nie jest już konieczne IMHO), powinieneś dodać więcej typów czcionek, takich jak:

@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 */
}

Możesz przeczytać więcej o tym, dlaczego wszystkie te typy są wdrażane i ich włamania tutaj . Aby uzyskać szczegółowy widok typów plików obsługiwanych przez przeglądarki, zobacz:

@ Font-face Wsparcie przeglądarki

Obsługa przeglądarki EOT

Obsługa przeglądarki WOFF

Obsługa przeglądarki TTF

Obsługa przeglądarki SVG-Fonts

mam nadzieję że to pomoże

— wybrać
źródło

Działa idealnie dobrze w prawie wszystkich przeglądarkach ... Jedyną przeglądarką, która nie działała, jest FireFox Linux ... Masz jakieś sugestie?

— Naruto

Pamiętaj, że jeśli hostujesz to na serwerze Windows, musisz dodać typ pliku .otf jako prawidłowy i obsługiwany typ pliku. Jedynym sposobem, aby przekonać się, że jest to problem, jest kliknięcie linku do czcionki (błąd 404, jeśli tak). Możesz tymczasowo zmienić nazwę na .ttf lub nawet .html w celu przetestowania. Jedynymi czcionkami internetowymi obsługiwanymi przez IE jest format WOFF. (Nie, nigdy też o tym nie słyszałem!)

— Henrik Erlandsson

Hej, a co z wydajnością tego typu czcionek? Czy to jest dobre? Czy inny jest lepszy?

— Anggie Aziz,

Czy "w przykładach kodu brakuje cudzysłowów ( )?

— steffen

Wygląda na to, że otf powinien teraz działać prawie we wszystkich obszarach caniuse.com/#search=otf

— Stephen

Z przykładów katalogu czcionek 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;
}

Działa to w różnych przeglądarkach z .ttf, wierzę, że może współpracować z .otf. ( Wikipedia twierdzi, że .otf jest głównie wstecznie kompatybilny z .ttf) Jeśli nie, możesz przekonwertować .otf na .ttf

Oto kilka dobrych stron:

Dobry podkład:

http://www.alistapart.com/articles/cssatten
Inne informacje:

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

— kzh
źródło