Jak osadzić czcionki w HTML?


80

Próbuję wymyślić przyzwoite rozwiązanie (zwłaszcza od strony SEO) do osadzania czcionek na stronach internetowych. Do tej pory widziałem rozwiązanie W3C , które nawet nie działa na Firefoksie, i to całkiem fajne rozwiązanie . Drugie rozwiązanie dotyczy tylko tytułów. Czy jest dostępne rozwiązanie dla pełnego tekstu? Mam dość standardowych czcionek na stronach internetowych.

Dzięki!



możliwy duplikat czcionek w sieci
— user2284570

2
@ user2284570 To pytanie ma lepszą odpowiedź. Zamknąłem drugą jako duplikat tego.
— Madara's Ghost

Jakieś zaktualizowane odpowiedzi na to pytanie? Wszystkie odpowiedzi mają ponad pół dekady. Poza tym nie mogłem znaleźć odniesienia na MDN, jeśli ktoś wie.
— 1,21 gigawata

Podaj aktualną odpowiedź i pomóż światu. Sam nie robiłem HTML od 2011 roku
— Dan Rosenstark

Odpowiedzi:


134

Sytuacja uległa zmianie od czasu, gdy pierwotnie zadano to pytanie i udzielono na nie odpowiedzi. Wykonano wiele pracy nad osadzeniem czcionek w różnych przeglądarkach, aby tekst podstawowy działał przy użyciu osadzania @ font-face.

Paul Irish stworzył składnię Bulletproof @ font-face łącząc próby wielu innych osób. Jeśli faktycznie przejrzysz cały artykuł (nie tylko górną część), zezwala on na umieszczenie pojedynczego oświadczenia @ font-face na IE, Firefox, Safari, Opera, Chrome i być może inne. Zasadniczo może to zasilać OTF, EOT, SVG i WOFF w sposób, który niczego nie psuje.

Wycięte z jego artykułu:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Pracując z tej bazy, Font Squirrel zebrał wiele przydatnych narzędzi, w tym generator @ font-face, który umożliwia przesłanie pliku TTF lub OTF i uzyskanie automatycznie przekonwertowanych plików czcionek dla innych typów, wraz z gotowymi kodami CSS i strona demonstracyjna HTML. Font Squirrel ma również setki zestawów @ font-face .

Soma Design stworzyła również FontFriend Bookmarklet , który na nowo definiuje czcionki na stronie w locie, dzięki czemu możesz wypróbować różne rzeczy. Obejmuje obsługę funkcji przeciągnij i upuść @ font-face w programie FireFox 3.6+.

Niedawno firma Google zaczęła dostarczać Google Web Fonts , asortyment czcionek dostępnych na licencji Open Source i obsługiwanych z serwerów Google.

Ograniczenia licencji

Wreszcie, WebFonts.info stworzył ciekawą listę czcionek dostępnych do osadzania @ font-face na podstawie licencji. Nie twierdzi, że jest to lista wyczerpująca, ale czcionki na niej powinny być dostępne (prawdopodobnie z warunkami, takimi jak atrybucja w pliku CSS) do osadzania / łączenia. Ważne jest, aby przeczytać licencje , ponieważ istnieją pewne ograniczenia, które nie są oczywiście przesuwane do przodu w pobieraniu czcionek.


11
Myślę, że warto podkreślić, że nie możesz automatycznie brać czcionki i @ font-face-ize, nawet jeśli kupiłeś licencję na tę czcionkę legalnie i za dużo pieniędzy. Musisz sprawdzić licencję czcionki, aby dowiedzieć się, czy tego rodzaju ponowna dystrybucja elektroniczna jest dozwolona, ​​czy nie. Naruszenia są tak łatwe do wykrycia i przeszukania, że ​​w przeciwnym razie mogą łatwo pojawić się problemy, zwłaszcza jeśli jesteś firmą znajdującą się we właściwej jurysdykcji.
— Pekka

FontSquirrel jasno to podkreśla zarówno w swoich gotowych zestawach czcionek, jak iw swoim generatorze (co wymaga sprawdzenia, czy czcionki są faktycznie licencjonowane do takiego użytku). Istnieją inne narzędzia do konwersji, ale nie wiem, które z nich są przedmiotem dyskusji na temat licencjonowania.
— słupek ogrodzeniowy

Fascynujące rzeczy. Z ciekawości, jak trafiłeś do tego postu? Tego samego dnia otrzymano więcej niż jedną odpowiedź i kilka komentarzy na temat Twojej odpowiedzi. +1 ...
— Dan Rosenstark

1
Nie pamiętam, jak się na tym skończyłem - może poszukałem czcionki HTML, ale odpowiedziałem, ponieważ pracowałem nad tym dla klienta tuż przed świętami, więc informacje były świeże. Zakładam, że Pekka widział to jako nową aktywność na starym poście; Nie wiem, czy flagi systemowe próbują publikować wiele linków (wiem, że początkowo są zablokowane), ale pomyślałem, że może to być przypadek „sprawdź, czy ktoś nie spamuje”.
— słupek ogrodzeniowy

@Pekka "naruszenia są tak łatwe do wykrycia i przeszukania" ... czy możesz mnie trochę wyjaśnić, proszę ... jak byłoby to wykrywanie i trałowanie iw jakich okolicznościach by się to stało?
— Dan Rosenstark,

9

Próbować Facetype.js , przekonwertuj swoją czcionkę .TTF na plik JavaScript. Pełna zgodność z SEO, obsługuje FF, IE6 i Safari i bezproblemowo degraduje się w innych przeglądarkach.


2
Dla tych, którzy zastanawiają się, jak to działa, używa tagu Canvas (html 5) lub VML.
— Chris S

1
Musiałbym się zgodzić z tym rozwiązaniem, które wygląda niezwykle prosto i wydaje się działać na każdej przeglądarce, którą na nie rzucam.
— askon

1
Ten link jest martwy.
— aleclarson

6

Nie, nie ma przyzwoitego rozwiązania dla typu ciała, chyba że chcesz zaspokoić potrzeby tylko tych z najnowszymi przeglądarkami.

Microsoft ma WEFT , własną zastrzeżoną technologię osadzania czcionek, ale nie słyszałem o niej od lat i nie znam nikogo, kto jej używa.

Radzę sobie z sIFR dla typu wyświetlania (nagłówki, tytuły postów na blogu itp.) I używam jednej z mniej zużytych bezpiecznych czcionek internetowych dla typu ciała (np. Trebuchet MS). Jeśli znudziły Ci się wszystkie czcionki bezpieczne w Internecie, prawdopodobnie definiujesz ten termin zbyt wąsko - spójrz na tę macierz czcionek standardowych które są dostarczane z głównymi systemami operacyjnymi i prawdopodobnie znajdziesz kaskadę czcionek, która będzie złapać prawie wszystkich użytkowników sieci.

Na przykład: font-family: "Lucida Grande", "Verdana", sans-serifto powszechna kaskada czcionek; OS X jest dostarczany z Lucidą Grande, ale te z systemem Windows otrzymają Verdana, bezpieczną czcionkę internetową z literami o podobnym rozmiarze i kształcie do Lucida Grande. Użytkownicy Linuksa otrzymają również Verdana, jeśli zainstalowali pakiet bezpiecznych czcionek internetowych, który istnieje w menadżerach pakietów większości dystrybucji, w przeciwnym razie powrócą do zwykłego bezszeryfowego.


2
Pozwólcie, że stanę na chwilę na mydelniczce: chociaż chciałbym, żeby Windows miał więcej "dobrych" czcionek (OS X ma największe hity w historii typografii: Futura, Helvetica, Gill Sans itp.), Dobrze, że mamy powstrzymywać się przy wybieraniu czcionek. Wolność może być również wykorzystana do zła.
— savetheclocktower

Brak komentarza do Twojego komentarza, ale dziękuję za odpowiedź. To wspaniale. Czy jest gdzieś lista kaskad? Dzięki jeszcze raz.
— Dan Rosenstark

Oto jedna lista: ( ampsoft.net/webdesign-l/WindowsMacFonts.html ). Jest konserwatywny, wymienia tylko czcionki, które są identyczne (lub prawie takie) na różnych platformach. Konieczne może być porównanie, aby zobaczyć, która „bezpieczna” czcionka najbardziej przypomina Twoją „ryzykowną” czcionkę.
— savetheclocktower

(Och, też: zawsze określaj ogólne rozwiązanie zastępcze - sans-serif, serif lub monospace. W ten sposób przynajmniej będzie w polu gry, jeśli użytkownik nie będzie miał żadnej z żądanych czcionek.)
— savetheclocktower

1
Większość użytkowników, którzy odwiedzają strony, nad którymi pracuję, nadal używa IE6 (ci dranie), więc z tego punktu widzenia uważam, że najnowsze główne wersje są krwawe.
— Gene

4

I jest to mało prawdopodobne - EOT to dość restrykcyjny format obsługiwany tylko przez IE. Zarówno Safari 3.1, jak i Firefox 3.1 (no cóż, obecna alfa) i być może Opera 9.6 obsługują osadzanie czcionek True Type (ttf), a przynajmniej Safari obsługuje czcionki SVG za pomocą tego samego mechanizmu. Lista osobna miała dobrą dyskusję na ten temat jakiś czas temu .


3

Wypróbuj Typekit , opcję komercyjną (dostępny jest również bezpłatny pakiet).

Używa różnych technik w zależności od używanej przeglądarki jest ( @font-facevs. EOTformat), a oni zadbać o wszystkie kwestie Czcionka licencjonowania dla Ciebie również. Obsługuje wszystko, aż do IE6.

Oto więcej informacji o działaniu Typekit:


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.