2010-09-16 19 views
25

Kiedy projektuję w Photoshopie, moje czcionki są cienkie i wyraźne, ale kiedy deklaruję czcionki w CSS - nawet przy użyciu font-weight: lighter - czcionki zawsze wydają się bardziej wyraziste.Bezpieczne czcionki sieci Web - jak uzyskać cieńszą?

Może to właśnie sposób, w jaki przeglądarka renderuje czcionkę (czcionki IE pozostają cienkie), ale zastanawiałem się, czy były jakieś sztuczki lub wskazówki, które pozwoliłyby uzyskać ten sam cienki, ostry wygląd.

Odpowiedz

2

Masz rację, jest to różnica w renderowaniu. Sposób renderowania tekstu zależy od systemu operacyjnego, ustawień i przeglądarki (np. Przeglądarka Safari renderuje bardziej odważnie niż IE). Więc nie ma sposobu, aby to renderowanie pasowało do twojego kompu photoshop.

trochę więcej informacji tutaj:

Browser Choice vs Font Rendering | Phinney on Fonts

15

renderowania czcionek może być skomplikowane. Niestety różne przeglądarki renderują tę samą czcionkę w różny sposób.

Jeśli chodzi o CSS, ustawienie font-weight:100 zapewnia najlżejszy dostępny ciężar zostanie użyty. Możesz także ustawić -webkit-font-smoothing:antialiased.

<style type="text/css"> 
    body { 
     font-family:"Helvetica Neue", Arial, sans-serif; 
     font-weight:100; 
     -webkit-font-smoothing:antialiased; 
    } 
</style> 

Helvetica Neue jest bardzo cienką czcionką natywną dla OSX.

Najprościej jest naprawdę http://www.google.com/fonts/

również zauważyć:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

+0

Jeśli układ fontu nie ma znaczenia, jest to szybkie rozwiązanie, ale nie sprawiają, że rzeczywiście czcionka jest bardziej ostra, ponieważ jest to tylko wybrana czcionka, która ma lżejszą czcionkę (lub sama czcionka ma cienkie linie). – einord

1

Nie wierzę w jedno z uniwersalnych czcionek internetowych ma bardzo cienką wagi we wszystkich przeglądarkach. Istnieją jednak sposoby osadzania niestandardowych czcionek we wszystkich głównych przeglądarkach w dzisiejszych czasach.

http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator

Każde z tych narzędzi można dostać się tylko o wszelkiego rodzaju czcionki można sobie wyobrazić. Po prostu uważaj na prawa autorskie na ostatnim.

25

użyć CSS, aby wygładzić swoje czcionek ...

umieścić to w CSS:

-webkit-font-smoothing: antialiased; 
+1

to jest rzeczywiście coś, co pomaga. przynajmniej dla przeglądarek webkit! sprawdź także tę odpowiedź na podobne pytanie: http://stackoverflow.com/a/4012154/336235 –

+0

czy jakiekolwiek takie rozwiązanie jest dostępne dla Opera, IE i Firefox? –

Powiązane problemy