2010-10-20 4 views
7

Mam świadomość, że użycie @ font-face pozwala przeglądarce pobierać niestandardową czcionkę i używać jej na stronie internetowej, tak jak każda czcionka systemowa.Jak działa @ font-face?

Co chcę wiedzieć, czy przeglądarka koduje czcionkę, czy używa jej bez ujawniania?

Dzięki

+0

Co masz na myśli przedstawiając go? –

+0

Całkiem dobrze, właściwie. –

+0

@Ian Devlin Przez "ekspozycję" mam na myśli pozwolenie na używanie przez inne programy. – hitautodestruct

Odpowiedz

6

Przeglądarka nie może chronić źródła czcionek. Po otrzymaniu informacji przez przeglądarkę, możesz bezpiecznie założyć, że użytkownik będzie miał pełny dostęp do tego, co wyślesz.

W ten sposób problem z utrzymaniem czcionek jest zabezpieczony na poziomie prawnym (poprzez wybór czcionek umożliwiających osadzanie czcionek) lub poprzez schematy zaciemniania po stronie serwera. Na przykład, patrz na czcionek osadzonych przez TypeKit:

@font-face { 
    font-family:"rosewood-std-fill-1"; 
    src:url(data:font/opentype;base64,d09GRgABAAAAAEa4ABMAAAAA2XwA.....); 
    font-style:normal; 
    font-weight:400; 
} 

Czcionka mieszaniem w procesie kodowania base64. Dodatkowo czcionka jest podzielona na dwie części, a liczba glifów jest ograniczona tylko do tych wymaganych przez witrynę.

Z drugiej strony, patrząc na zestawy czcionek FontSquirrel i Google Font API @font-face, widać, że faktyczne źródło czcionki jest wysyłane do użytkownika - nie jest wymagane zaciemnianie. Dodatkowo właściciele czcionki może żądać jakiejś formy przyznawania, takich jak

Jeśli czcionka jest za darmo czcionki ($ 0,00 opłata licencyjna), można użyć tej czcionki do osadzania czcionek w twarz, ale tylko wtedy, gdy cię umieścić link do www.exljbris.nl na swojej stronie i/lub umieścić ten anons

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ 

w pliku CSS jak najbliżej na kawałek kodu, który deklaruje osadzanie font-face tego czcionka.

widoczna w this license. Dlatego z tego wszystkiego możemy spokojnie wywnioskować, że problem bezpieczeństwa fontów nie występuje po stronie klienta, ale raczej spada na ramię programisty, więc przeglądarki nie mogą i nie robią nic, aby powstrzymać użytkowników przed dostępem do tych czcionek.

+3

Kodowanie base64 nie jest zaciemnianiem, jest sposobem na wyeliminowanie potrzeby dodatkowego żądania HTTP dla pliku czcionki przy zachowaniu typu MIME "text/css". –

+0

@Stan Naprawdę nie mogę wymyślić innego powodu. Typekit pozwala na użycie do pięciu czcionek, więc obciążenie na żądanie HTTP nie jest * to * znaczące. Czy masz jakieś dokumenty, które to potwierdzają? ' –

+3

* Każde * żądanie HTTP jest znaczące, a base64 jest kodowaniem transferu zawartości, dla którego każdy ma dekoder. Celem nie jest zaciemnianie - alternatywą jest transfer binarny, którego nie można osadzić w arkuszu stylów. Możesz wymusić żądanie pliku czcionki, jeśli chcesz; Typekit postanowił tego nie robić. (Używam tej samej techniki dla małych powtarzających się obrazów tła.) Dali ci plik, który jest bardziej dostępny dla użytkownika niż binarny (bez szukania w pamięci podręcznej, po prostu kopiowanie z pliku CSS, zapisywanie i konwertowanie). –

0

W większości przypadków, plik czcionki jest narażony na to, że jest bezpośrednio związany z pliku CSS, a więc ktoś na tyle inteligentny można pobrać czcionki i zainstalować go na swoim komputerze. Jest to częściowo spowodowane tym, dlaczego większość komercyjnych licencji na czcionki nie zezwala na ich używanie na stronach internetowych o numerze @font-face. Ale istnieją techniki, które to ograniczają. Na przykład sprawdź opcję "Tylko sieć" w generatorze font-face font squirrel @ font-face.

2

@font-face informuje przeglądarkę, gdzie pobrać rzeczywistą czcionkę.

Na przykład, podczas korzystania Google's web fonts, dają ci CSS tak:

@font-face { 
    font-family: 'Cantarell'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw') format('truetype'); 
} 

Jeśli otworzysz url (http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw) przeglądarka pobierze plik rzeczywistą prawdziwy typ czcionki.

Pobrałem czcionki Google za pomocą tej metody (więc moje makiety w Photoshopie mają poprawną czcionkę).