Pytanie Jak osadzić czcionki w HTML?


Próbuję znaleźć przyzwoite rozwiązanie (szczególnie ze strony SEO) do osadzania czcionek na stronach internetowych. Jak dotąd widziałem rozwiązanie W3C, który nie działa nawet w Firefoksie, i to całkiem fajne rozwiązanie. Drugie rozwiązanie dotyczy tylko tytułów. Czy istnieje dostępne rozwiązanie dla pełnego tekstu? Mam już dość standardowych czcionek na stronach internetowych.

Dzięki!


76
2017-10-20 22:57


pochodzenie


X-Ref Jak dodać niestandardową czcionkę do strony internetowej? - hakre
możliwy duplikat Czcionki w sieci - user2284570
@ user2284570 To pytanie ma lepszą odpowiedź. Zamknąłem drugi jako duplikat tego. - Madara Uchiha♦


Odpowiedzi:


Rzeczy się zmieniły ponieważ to pytanie zostało pierwotnie zadane i udzielono na nie odpowiedzi. Wykonano wiele prac związanych z osadzaniem czcionek w różnych przeglądarkach, aby tekst bryłowy działał przy użyciu osadzania czcionek @.

Paul Irish razem Bulletproof @ składnia font-face łączenie prób z wieloma innymi osobami. Jeśli przejrzysz cały artykuł (a nie tylko jego szczyt), pozwala on na jedno wyrażenie @ font-face na pokrycie IE, Firefox, Safari, Opery, Chrome i ewentualnie innych. Zasadniczo to może zasilać OTF, EOT, SVG i WOFF w sposób, który niczego nie psuje.

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

Praca z tej bazy, Wiewiórka z czcionką zestaw różnych przydatnych narzędzi, w tym @ Generator twarzy czcionek co pozwala przesłać plik TTF lub OTF i uzyskać automatycznie przekonwertowane pliki czcionek dla innych typów, wraz z wbudowanym CSS i stroną HTML demo. Czcionka Wiewiórka również ma Setki zestawów @ font-face.

Soma Design opracowała również FontFriend Bookmarklet, który redefiniuje czcionki na stronie w locie, dzięki czemu możesz wypróbować różne rzeczy. Obejmuje on funkcję "przeciągnij i upuść" @ font-face w FireFox 3.6+.

Niedawno Google zaczął udostępniać Czcionki Google Web, zestaw czcionek dostępnych na licencji Open Source i obsługiwanych przez serwery Google.

Ograniczenia licencji

Wreszcie, WebFonts.info zebrał fajną listę wiki Czcionki dostępne do osadzania @ font-face na podstawie licencji. Nie jest to lista wyczerpująca, ale czcionki na niej powinny być dostępne (być może w warunkach takich jak atrybucja w pliku CSS) do osadzania / łączenia. Ważne jest, aby przeczytać licencje, ponieważ istnieją pewne ograniczenia, które nie są wypychane do przodu, oczywiście po pobraniu czcionek.


127
2017-12-27 22:27



Myślę, że warto podkreślić, że nie można automatycznie pobrać 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, czy tego rodzaju dystrybucja elektroniczna jest dozwolona, ​​czy nie. Naruszenia są tak łatwe do wykrycia i włokowania, że ​​mogą łatwo wystąpić problemy w inny sposób, szczególnie jeśli jesteś firmą znajdującą się w odpowiedniej jurysdykcji. - Pekka 웃
FontSquirrel wyraźnie wskazuje na to zarówno w swoich gotowych zestawach czcionek, jak iw generatorze (co wymaga sprawdzenia, czy czcionki są faktycznie licencjonowane do takiego użycia). Istnieją inne narzędzia do konwersji, ale nie wiem, które z nich dotyczą dyskusji o licencjonowaniu. - fencepost
Poprawiłem, aby było to jaśniejsze w mojej odpowiedzi. - fencepost
Fascynujące rzeczy. Z ciekawości, jak dostałeś się do tego postu? W tym samym dniu pojawiła się więcej niż jedna odpowiedź i kilka uwag na temat odpowiedzi. +1 ... - Dan Rosenstark
Nie pamiętam, jak do niego trafiłem - prawdopodobnie szukam czcionki HTML, ale odpowiedziałem, ponieważ pracowałem nad tym właśnie dla klienta tuż przed świętami Bożego Narodzenia, więc informacje były świeże. Zakładam, że Pekka postrzegał to jako nową aktywność na starym stanowisku; Nie wiem, czy flagi systemu próbują publikować wiele linków (wiem, że to blokowało się początkowo), ale pomyślałem, że może to być przypadek "sprawdź to, aby upewnić się, że to nie jest ktoś, kto spamuje". - fencepost


Próbować Facetype.jskonwertujesz swoją czcionkę .TTF do pliku JavaScript. Pełna zgodność z SEO, obsługa FF, IE6 i Safari oraz poniżenie w innych przeglądarkach.


9
2018-02-15 11:22



Bardzo bardzo fajne. Sprawdzę to. - Dan Rosenstark
Dla tych, którzy zastanawiają się, jak to działa, używa tagu canvas (html 5) lub VML. - Chris S
Musiałbym zgodzić się z tym rozwiązaniem, wygląda to niezwykle prosto i wygląda na to, że działa na każdej przeglądarce, którą mu podrzucam. - askon
Ten link nie działa. - aleclarson


Nie, nie ma przyzwoitego rozwiązania dla typu ciała, chyba że jesteś gotów zaspokoić tylko tych z najbardziej wymagającymi przeglądarkami.

Microsoft ma WĄTEK, ich własną, zastrzeżoną technologię osadzania czcionek, ale nie słyszałam o tym od lat i nie znam nikogo, kto jej używa.

Dostaję z sIFR dla typu wyświetlania (nagłówki, tytuły postów na blogu itp.) I używając jednej z mniej zużytych czcionek internetowych typu body (jak Trebuchet MS). Jeśli znudziły Cię wszystkie bezpieczne czcionki internetowe, najprawdopodobniej definiujesz ten termin zbyt wąsko - spójrz na ta macierz czcionek magazynowych ten statek z większymi systemami operacyjnymi i jest szansa, że ​​znajdziesz kaskadę fontów, która przyciągnie prawie wszystkich użytkowników sieci.

Na przykład: font-family: "Lucida Grande", "Verdana", sans-serif jest powszechną kaskadą czcionek; OS X jest wyposażony w Lucida Grande, ale te z systemem Windows otrzymają Verdana, bezpieczną dla sieci czcionkę o literach o podobnej wielkości i kształcie do Lucida Grande. Użytkownicy Linuksa otrzymają także Verdana, jeśli zainstalują bezpieczny pakiet czcionek sieciowych, który istnieje w większości menedżerów pakietów, lub wrócą do zwykłego sans-serif.


6
2017-10-20 23:17



Pozwól mi także stanąć na pudełku na mydło na minutę: choć chciałbym, aby Windows miał więcej "dobrych" czcionek (OS X ma największe przeboje historii typografii: Futura, Helvetica, Gill Sans, itp.), To dobrze, że mamy powstrzymywać się podczas wybierania czcionek. Wolność może być również używana do zła. - savetheclocktower
Brak komentarza do Twojego komentarza, ale dzięki za odpowiedź. To wspaniale. Czy gdzieś jest lista kaskad? Dzięki jeszcze raz. - Dan Rosenstark
Oto jedna lista: (ampsoft.net/webdesign-l/WindowsMacFonts.html). Jest konserwatywny, wyświetla tylko czcionki identyczne (lub prawie identyczne) na różnych platformach. Może być konieczne porównanie, aby zobaczyć, która "bezpieczna" czcionka jest najbardziej podobna do twojej "ryzykownej" czcionki. - savetheclocktower
(Och, również: zawsze określaj ogólny kod rezerwowy - sans-serif, szeryf lub monospace - w ten sposób przynajmniej będzie on w parku gry, jeśli użytkownik Żaden żądanych czcionek.) - savetheclocktower
Większość użytkowników, którzy przychodzą do stron, nad którymi pracuję, nadal używa IE6 (tych drani). Z tego punktu widzenia uważam najnowsze wersje główne za przełomowe. - Gene


I jest to mało prawdopodobne - EOT jest dość restrykcyjnym formatem obsługiwanym tylko przez IE. Zarówno Safari 3.1 i Firefox 3.1 (oraz obecna wersja alfa), jak i prawdopodobnie 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 na chwilę dobrą dyskusję plecy.


4
2017-10-20 23:06



Hej, miałem zamiar opublikować ten link, zamiast tego awansować. - Kris


Sprawdzić Typekit, opcja komercyjna (dostępna jest również bezpłatna paczka).

Używa różnych technik w zależności od używanej przeglądarki (@font-face vs. EOT format), a oni zajmują się również wszystkimi kwestiami licencjonowania czcionek. Obsługuje wszystko do IE6.

Oto kilka informacji o działaniu Typekit:


3
2017-12-27 22:29





Zapytałem to chwilę temu. Odpowiedź jest po prostu taka, że ​​to nie działa. :(


2
2017-10-20 23:17



prawda, dzięki za referencje! - Dan Rosenstark