Spędziłem kilka wieczorów badając najlepszy sposób wdrożenia @ font-face z dzisiejszymi nowoczesnymi przeglądarkami. Jestem pełnoetatowym programistą sieciowym z doświadczeniem jako grafik. Uważam, że możliwości i możliwości związane z projektowaniem stron internetowych stają się coraz bardziej interesujące. Zrobiłem więc kilka testów i chciałbym usłyszeć, czy ktoś ma jakieś rady, jakieś lepsze pomysły lub informacje na ten temat. Mój scenariusz testowy wygląda tak.

Przetestowałem z ALOT wieloma różnymi narzędziami i aplikacjami online, ale w końcu sprowadziłem to do jednej usługi online i jednej aplikacji.

FontSquirrel, narzędzie online - za darmo.http://www.fontsquirrel.com/fontface/generatorFontXChange, aplikacja na mac / win - 99 $.http://fontgear.net/fontxchange.html

Użyłem czcionki, która została dostarczona z moim Macem, Tamil Sangam MN i Tamil Sangam MN Bold, obie były otwarte, .otf.

TamilSangamMN.otf - 290 KBTamilSangamMNBold.otf - 271 KBBadanie wielkości konwersjiFontSquirrel

To dobre narzędzie online, bardzo dobre. Istnieje kilka różnych trybów i użyłem podstawowego i optymalnego. Wyjściem mojego pliku .otf było svg, ttf, eot i woff.

Podstawowy

Regularny

TamilSangamMN.svg233 KBTamilSangamMN.ttf71 KBTamilSangamMN.eot25 KBTamilSangamMN.woff30 KBRazem: 359 KB

Pogrubienie

TamilSangamMNbold.svg225 KBTamilSangamMNbold.ttf69 KBTamilSangamMNbold.eot25 KBTamilSangamMNbold.woff30 KBRazem: 349 KBOptymalny

Pierwszą rzeczą, jaką zauważyłem przy optymalnych czcionkach, jest to, że są znacznie mniejsze niż podstawowe warianty ~ 260 KB!

Regularny

TamilSangamMN.svg33 KBTamilSangamMN.ttf25 KBTamilSangamMN.eot15 KBTamilSangamMN.woff17 KBŁącznie: 90 KB

Pogrubienie

TamilSangamMNbold.svg33 KBTamilSangamMNbold.ttf25 KBTamilSangamMNbold.eot15 KBTamilSangamMNbold.woff17 KBŁącznie: 90 KBFontXChange

To narzędzie może zrobić znacznie więcej niż tylko żonglowanie czcionkami w sieci. Może konwertować kilka formatów między sobą; jak opentype, true type, czcionki internetowe, skrypt pocztowy i tak dalej. Wynik jest ogólnie bardzo wysokiej jakości, pliki są tak duże, prawie dwukrotnie większe od wersji FontSquirrels Basic i ponad 7 razy większe niż wersja FontSquirrels Optimal.

Regularny

TamilSangamMN.svg480 KBTamilSangamMN.ttf72 KBTamilSangamMN.eot72 KBTamilSangamMN.woff80 KBŁącznie: 704 KB

Pogrubienie

TamilSangamMNbold.svg463 KBTamilSangamMNbold.ttf69 KBTamilSangamMNbold.eot70 KBTamilSangamMNbold.woff80 KBŁącznie: 682 KBKonfigurowanie CSS

Początkowo zastanawiało mnie, czy rzeczywista kolejność na liście czcionek ma znaczenie. Potem odkryłem, że niektóre z nich przyjmują pierwszy format, który uznają za zgodny, zamiast trzymać się optymalnego formatu - i jest to do bani. Po kilku pracach stwierdziłem, że jest to optymalny sposób na sformatowanie css (zwróć uwagę na kolejność typów plików |ważny!).

@font-face {
    font-family: 'TamilSangam';
    src: url('.eot');
    src: url('.svg') format('svg'),          
         url('.eot?#iefix') format('embedded-opentype'),
         url('.woff') format('woff'),
         url('.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Moje wyniki testuRegularne czcionki

Najlepszą wersję oznaczyłem *

Firefox MAC (15.0.1)

FontSquirrel Optimal: Renderuje trochę do tłuszczuFontSquirrel Basic: Renderuje nieco do tłuszczuFontXChange 4.0: Renderuje nieco na grubo, ale kerning jest lepszy niż wersja FontSquirrel *

Firefox Windows (15.0.1)

FontSquirrel Optimal: Renders bardzo ładnyFontSquirrel Basic: czcionka jest postrzępiona / nierównaFontXChange 4.0: Rendery bardzo ładne *

Safari Mac (6.0)

FontSquirrel Optimal: Perfect renderFontSquirrel Basic: Perfect renderFontXChange 4.0: Perfect render *

Chrome Mac (21.0)

FontSquirrel Optimal: Trochę tłuszczuFontSquirrel Basic: Trochę tłuszczuFontXChange 4.0: Perfect render *

Chrome Windows (21.0)

FontSquirrel Optimal: Perfect renderFontSquirrel Basic: Perfect renderFontXChange 4.0: Perfect render *

Internet Explorer (9.0)

FontSquirrel Optimal: Perfect render *FontSquirrel Basic: Perfect renderFontXChange 4.0: Czcionka jest postrzępiona / nierównaPogrubione czcionki

Firefox MAC (15.0.1)

FontSquirrel Optimal: Renders bardzo gruby *FontSquirrel Basic: Render bardzo grubyFontXChange 4.0: Renderuje bardzo grubo, ale lepsze kerning(Chciałbym wybrać ten dla Maca, ale ponieważ wersja firefox dla Windows nie jest tutaj zgodna, musi się udać)

Firefox Windows (15.0.1)

FontSquirrel Optimal: Renders ok, niezbyt antyaliasowany *FontSquirrel Basic: czcionka jest postrzępiona / nierównaFontXChange 4.0: Czcionka jest nieco zniekształcona / postrzępiona

Safari Mac (6.0)

FontSquirrel Optimal: Perfect render *FontSquirrel Basic: Perfect renderFontXChange 4.0: Renderuje tłuszcz

Chrome Mac (21.0)

FontSquirrel Optimal: Perfect render *FontSquirrel Basic: Dobry render, kilka procent tłuszczuFontXChange 4.0: Renderuje tłuszcz

Chrome Windows (21.0)

FontSquirrel Optimal: Perfect render *FontSquirrel Basic: Perfect renderFontXChange 4.0: Renderuje bardzo grubo

Internet Explorer (9.0)

FontSquirrel Optimal: Perfect render *FontSquirrel Basic: Perfect renderFontXChange 4.0: Czcionka jest postrzępiona / nierównaOstateczna realizacja

Zazwyczaj organizuję moje webfonty według następującego wzoru: <webfonts> / <źródło konwersji> / <metoda konwersji> / <fonts>

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Graficzny przegląd wyniku (pełny rozmiar nahttp://i.stack.imgur.com/atb98.png)

Wnioski i zadania

Nie ma jednego narzędzia, które dostarczyłoby czcionek, które ładnie prezentują się na komputerach Mac i Windows we wszystkich przeglądarkach. Musisz eksperymentować i testować każdą czcionkę. Metodologia zamieszczona powyżej jest prostym sposobem i sugestią, jak przetestować i eksperymentować z @ font-face's.

Czy jest coś, co według mnie mogę zmienić w moich metodach lub implementacji, czy jest jakaś aplikacja lub usługa, której brakowało?

Wszystkiego najlepszego / T