@ font-face rozmazane/pogrubione/zniekształcone glify dla zdalnych czcionek

Question

Próbuję przełączyć się na @font-face zamiast polegać na użytkownikach, aby mieć zainstalowaną czcionkę (a dokładniej jest to czcionka Terminus, a raczej jej wersja TTF).

Niestety, ja wpadłem na jakiegoś dziwacznego „pogrubienie” lub „zakłócenia” z czcionkami w kontaktach ze zdalnie hostowanych plików, jak pokazano na tym zdjęciu:

Jak widać, z jakiegoś powodu zdalnie pobierane czcionki są zniekształcone w rozmiarach 12, 14, 16, 18, 20, 24, podczas gdy lokalne czcionki mają zastosowaną "normalizację" dla tych części, które sprawiają, że wyglądają ładnie i na miejscu.

Inną rzeczą wspomnieć, że już próbował użyć FontSquirrel's WebFont Generator który demo HTMLs zrzut ekranu jest wyświetlany wzdłuż tych kodów CSS odpowiednio:

@font-face { 
    font-family: 'terminus_ttfmedium'; 
    src: url('terminusmedium-4.38-webfont.ttf') format('truetype'); 
} 

i

@font-face { 
    font-family: 'terminus_ttfmedium'; 
    src: local('Terminus (TTF)'); 
} 

Terminus (TTF) to ta sama paczka plików, właśnie zainstalowana na /usr/share/fonts/.

Każdy wgląd byłby bardzo doceniany!

EDIT: Zmiana opcji zaawansowanych FontSquirrel w ogóle nie pomaga w rozwiązaniu tego problemu.

EDIT2: Nie wszystkie metody, które próbowałem wykonać w Firefoksie. Dodatkowo skopiowałem czcionkę do katalogu roboczego (tego samego, który był używany lokalnie), połączyłem go z polem "URL" i nadal utrzymuje zniekształcenia. To jest daremne!

Answer 1

Być może można spróbować wymusić wygładzoną renderowania czcionek:

body { 
-webkit-font-smoothing: antialiased; 
font-smoothing: antialiased; 
} 

Answer 2

font-wiewiórki używane mieć sekcję z wieloma wyjściami. TTF nie działa we wszystkich wersjach Browers

 src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'), 
    url('Bevan-webfont.woff') format('woff'), 
    url('Bevan-webfont.ttf') format('truetype'), 
    url('Bevan-webfont.svg#BevanRegular') format('svg'); 

używają mieć pakiety czcionek z tymi wszystkimi rozszerzeniami, cant wydają się znaleźć go na stronie więcej.

Answer 3

W rzeczywistości TTF akceptuje tylko mozila, istnieje wiele typów czcionek, takich jak TTF, SVG, WOFF, eot. musisz użyć wszystkich plików czcionek. Oto niesamowite narzędzie do generowania fontface.

http://www.fontsquirrel.com/tools/webfont-generator

Oto przykład:

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

myślę, że to pomoże.

Answer 4

Dodaję to jako odpowiedź, ponieważ nie mam wystarczającej liczby punktów do komentowania. Ale to jest pytanie: Czy masz zainstalowany lokalnie Terminus? Jeśli tak, spróbuj odinstalować i zobaczyć, co otrzymasz.

Przeprosiny za komentowanie jako odpowiedź ...

Answer 5

Zamiast dodawać cały ten kod CSS i wszystkie pliki potrzebne do działania w wielu przeglądarkach, po prostu wypróbuj Google WebFonts. http://www.google.com/webfonts

Answer 6

Znalazłem, że pomogło w przypadku poniższych elementów, które powodują rozmycie.