2014-04-13 28 views
18

Zajmuję się kodem źródłowym projektu, w którym używana jest licencjonowana czcionka z myfonts.com.W jaki sposób licencjonowana czcionka internetowa jest renderowana?

Plik ten zawiera css -

/* @import must be at top of file, otherwise CSS will not work */ 
    @import url("//hello.myfonts.net/count/123d4d"); 

    @font-face { 
    font-family: 'SoliPx'; 
    src: url('webfonts/123D4D_1_0.eot'); 
    src: url('webfonts/123D4D_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/123D4D_1_0.woff') format('woff'),url('webfonts/123D4D_1_0.ttf') format('truetype'); 
} 

I jak wspomniano w URL-source - są EOT, WOFF pliki TTF w lokalnych Czcionki Webfonts folderze projektu.

Wiem, jak ogólnie działają funkcje @ font-face i webfonts.

Jednak w powyższym przypadku, gdy używana jest licencjonowana/komercyjna czcionka, nie widzę żadnych plików czcionek pobranych w Dev Tools, ale tekst jest renderowany za pomocą określonej czcionki.

Istnieje żądanie netto, które przechodzi do hello.myfonts.net/count/123d4d ze statusem 200 i odpowiedź content-type z "text/css", ale nic w treści odpowiedzi.

Co dzieje się wewnętrznie? Jak to działa?

+0

To pytanie wydaje się być nie na temat, ponieważ dotyczy licencjonowania. –

+5

@ JukkaK.Korpela - Proszę przeczytać moje pytanie - po prostu chcę wiedzieć, jak czcionki są renderowane, w jaki sposób pliki czcionek są ukryte i nie chodzi o warunki licencji –

+0

Myślę, że źle zrozumiałeś, jak działa @ font-face - (at) deklaracja typu font-face jest tym, co renderuje czcionki sieciowe poprzez ładowanie określonych plików. Jeśli ich nie widzisz, istnieją pewne możliwości - najpierw są one buforowane (powinny nadal pokazywać) lub masz tę samą czcionkę zainstalowaną lokalnie, w którym to przypadku przeglądarka po prostu używa tego. Import (at) nie ma wpływu na renderowanie czcionek, to po prostu nie zadziała, jeśli nie znajduje się u góry pliku, aby zarejestrować odsłonę dla czcionki. – Mark

Odpowiedz

30

mam do czynienia z tym wcześniej, a tu jest to, co czyni, że importowany plik:

  1. miarę faktycznie ładowanie czcionek, to nic nie robi. Opuściłem to wcześniej (podczas testowania), a czcionki ładują się dobrze z mojego serwera.

  2. Zlicza liczbę razy pliki są importowane przez CSS (stąd /count/ w URL). Jeśli czytasz licencję webfont na myfonts.com, większość webfontów ma miesięczny limit wyświetleń strony. Jeśli zdasz ten limit, myfonts będzie chciał ponownie obciążyć Twoje konto lub zasugerować zakup nowej licencji o wyższym limicie.

Tak naprawdę mamy tu punkt końcowy API, który zwraca pusty plik CSS. Za każdym razem, gdy załadowany jest plik CSS, myfonts dodaje +1 do liczby miesięcznych odsłon na koncie, które odpowiada hasłu na końcu, w twoim przypadku 123d4d.

Po raz kolejny nie ma to nic wspólnego z ładowaniem samych czcionek. Masz pliki na swoim serwerze i będą one ładowane po zatrzymaniu z pełną referencją.

+3

Więc komentarz w pliku CSS z MyFonts stwierdzający "@import musi być na górze pliku, inaczej CSS nie zadziała" (odnosząc się do skryptu liczenia) nie jest tak naprawdę prawda? Oni po prostu blefują, aby upewnić się, że policzycie swoje poglądy? –

+16

Jest technicznie niepoprawny. To zadziała, ale chcą, aby ludzie uwzględnili go w celu uzyskania dokładnych odsłon. Etyczne podejście polega na ładowaniu adresu URL hello.myfonts.net _asynchronicznie_ przez JavaScript.W ten sposób MyFonts nadal uzyskuje widoki strony, a cały arkusz stylów nie jest blokowany przez identyfikator URI strony (!). –

+6

+1. Dobry chwyt @ TristanZimmerman. Testowałem moją witrynę w wolniejszych sieciach i stwierdziłem, że import uniemożliwił renderowanie całej strony. Nie rozumiem, dlaczego myfonts.net dba o wyświetlenia strony. Zrobiłem PAY za czcionkę. –