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!

Dan Rosenstark
źródło
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.

słupek ogrodzeniowy
źródło
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.

Martin Meixger
źródło
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.

savetheclocktower
źródło
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 .

olliej
źródło
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:

philfreo
źródło
2

Pytałem o to jakiś czas temu . Odpowiedź brzmi w zasadzie, że to nie działa. :(

Marcus Downing
źródło