Когда я рисую в Photoshop, мои шрифты тонкие и четкие, но когда я объявляю шрифты в CSS - даже при использовании font-weight: lighter - шрифты всегда кажутся более смелыми.
Возможно, именно так браузер отображает шрифт (в IE шрифты остаются тонкие), но мне было интересно, есть ли какие-либо трюки или подсказки для достижения того же тонкого, четкого вида.
Вы правы, это разница в рендеринге. Как текстовое оформление зависит от вашей ОС, настроек и вашего браузера (например, Safari делает смелее IE). Таким образом, нет способа сделать этот рендеринг соответствующим вашему фотошопу.
Немного больше информации здесь:
Выбор браузера против рендеринга шрифтов | Phinney на шрифтах
Используйте CSS, чтобы сгладить ваши шрифты...
поместите это в свой CSS:
-webkit-font-smoothing: antialiased;
Реализация шрифтов может быть сложной. К сожалению, разные браузеры будут отображать один и тот же шрифт по-разному.
Что касается CSS, установка font-weight:100 обеспечивает самый легкий доступный вес. Вы также можете установить -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 - очень тонкий шрифт, родственный OSX.
Ваш лучший выбор действительно http://www.google.com/fonts/
Также заслуживает внимания:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
Я не считаю, что любой из универсальных веб-шрифтов имеет очень тонкий вес во всех браузерах. Тем не менее, существуют способы встраивания пользовательских шрифтов во все основные браузеры в настоящее время.
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Любой из этих инструментов может дать вам практически любой шрифт, который вы можете себе представить. Просто будьте осторожны с авторскими правами на последнем.