Почему мой шрифт выглядит таким жирным?

вот изображение из дизайна Photoshop веб-страницы:

Photoshop render

и веб-страница с тем же размером, весом и т. д.:

Webpage render

Как вы можете видеть, текст отображается намного толще в веб-рендере, до такой степени, что он выглядит почти как другой шрифт.

здесь @font-face код, сопровождающий текст:

@font-face {
        font-family: "PT Sans";
        src: url('fonts/151428223-PTS55F.eot');
        src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
        url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
        url('fonts/151428223-PTS55F.woff') format('woff'),
        url('fonts/151428223-PTS55F.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

...и, для справки, настройки для текста в фотошопе:

enter image description here

12 ответов


вы используете шрифт PT Sans в Photoshop, то вы уже установили шрифт на вашем компьютере. Вы можете попытаться удалить код @font-face и загрузить установленный шрифт PT Sans с вашего ПК, который является тем же файлом шрифта, который вы используете в Photoshop, чтобы проверить, происходит ли проблема из-за использования кода @font-face или файлов формата @font-face. (например, без @font-face и без дополнительного css)

<head>
<style>
    body {
        font-family: "PT Sans";
        font-weight: normal;
        font-style: normal;
        font-size: 28px;
        color: #454545;
        text-align: center;
    }
</style>
</head>
<body>
    <p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>

вы также можете попробовать PT Sans от Google Шрифты.

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

(скопируйте приведенный выше код в качестве первого элемента в <head> вашего HTML-документа.)

как -webkit-font-smoothing Я не думаю, что это имеет большое значение, но вы можете прочитать хорошую статью об этом.

усиление скучного текста в WebKit - Крис Coyier.

Я Photoshop CC (2014) и я загрузил и установил PT Sans из Шрифты Google и Я сам протестировал проблему, используя приведенный выше HTML-код, и это результаты:

1-ваше изображение и 2 - Мой Photoshop CC 2014 (сглаживание сглаживания)

enter image description here

как вы можете видеть выше, текст отображается по-разному в браузерах и сглаживание в Photoshop, и если это те же результаты, которые у вас есть, и это выглядит почти как другой шрифт полностью для вас, то моя точка зрения:

Windows, Linux, OS X и мобильные устройства каждый (может) иметь разные текст-движки. Не говоря уже о том, что разные браузеры каждый имеют свои собственные значения по умолчанию для рендеринга текста, поэтому нет гарантии, что отрисовка шрифта будет отображаться в соответствии с назначением пользователя система. - by CSS-трюки текст-рендеринга

кстати, это выглядит нормально для меня... :)

дополнительные сведения:

Более Пристальный Взгляд На Рендеринг Шрифтов - Тим Аренс

УДАЧИ!


прежде всего, вы пытались манипулировать с font-weight собственность? Он может иметь больше, чем просто normal и bold значения. Вы можете попробовать установить его на 100, 200, ..., 900 и посмотреть, меняется ли вес шрифта (я думаю, это будет зависеть от шрифта, который вы используете).

во-вторых, вы можете попробовать добавить один из следующих шрифтов:-webkit-font-smoothing: none;, -webkit-font-smoothing: antialiased; или -webkit-font-smoothing: subpixel-antialiased;.


вы должны иметь отдельные @font-face декларации по регулярному и смелые веса шрифта (пример вверху только списки один) например.

@font-face {
    font-family: "PT Sans";
    src: url('fonts/PTSans-Regular.eot');
    src: url('fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Regular.woff') format('woff'),
         url('fonts/PTSans-Regular.ttf') format('truetype'),
         url('fonts/PTSans-Regular.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "PT Sans";
    src: url('fonts/PTSans-Bold.eot');
    src: url('fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Bold.woff') format('woff'),
         url('fonts/PTSans-Bold.ttf') format('truetype'),
         url('fonts/PTSans-Bold.svg#PTSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

кроме того, ниже CSS должен улучшить перевода -

.selector {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Примечание: стандартный PT Sans поставляется только в регулярных и жирных весах.


Chrome делает многие шрифты довольно жирными. К сожалению, мы прибегли к префиксу поставщика для разрешения шрифтов, не отображающих то же самое, что и в приложениях дизайна. Это в основном стандарт на большинстве наших сайтов :/

мы используем заполнитель в случае, если нам нужно быстро включить / отключить обходной путь (SCSS):

%fix-fatty-fonts {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body, button, input, select, textarea { @extend %fix-fatty-fonts;}

шрифты выглядят ужасно в Chrome - вот исправление является поучительной статьей по этому вопросу.


ok, если эта проблема происходит в браузере на основе webkit. Затем вы можете добавить эти свойства, чтобы сбросить толщину.

-webkit-text-stroke: 0.25px;

Я полагаю, вы используете шрифт в теге заголовка. Если это так, попробуйте установить шрифт-вес легче:

h1 {
    font-family: "PT Sans";
    font-weight: lighter;
}

Кажется, что вы рендеринг "PT Sans" в вашем проекте, обычно большинство шрифтов поставляется с разными весами шрифтов. Вы можете взять шрифты из шрифты Google вместо рендеринга на вашем сайте. затем вы можете использовать каждый вес шрифта, чтобы соответствовать вашим требованиям, таким как полужирный, обычный или легкий, и получить тот же внешний вид в Photoshop и web попробуйте это свойство CSS text-rendering.

.your-class {text-rendering: optimizeLegibility;}

удачи :)


поскольку PT Sans является шрифтом TTF, а лицензия позволяет изменять, вы можете настроить способ просмотра небольших размеров, обработав файлы с помощью http://www.freetype.org/ttfautohint/ (при небольших размерах это означает, что он будет иметь мало видимого эффекта на экранах с высокой плотностью пикселей, так как им не нужно намекать на правильную форму шрифта).

различные программные платформы будут иметь дело по-разному со шрифтами, которым не хватает намеков, и почти ни один шрифт не намекается полностью. От добавление подсказок к файлам шрифтов вы можете принудительно выполнить определенный рендеринг, когда на экране не хватает пикселей, в ttfautohint есть много опций для настройки вида рендеринга, который вы предпочитаете (вы можете получить тот же результат в Linux без изменения шрифтов, так как механизм рендеринга настраивается через fontconfig).

конечно, это заменит намек на файлы шрифтов, поэтому, если создатель шрифта потрудился настроить некоторые комбинации глифа с умными ручными подсказками, автоматизированный намеки могут закончиться хуже.


Как вы установили сглаживание в PS? Вероятно, поэтому он выглядит по-другому в PS, а затем в браузере. Проблема в том, что каждый браузер отображает текст по-разному, к сожалению. И вы не можете установить сглаживание. Это может быть интересно для вас: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/


попробуйте следующее:

.YourTextClass {
-webkit-transform:translateZ(0);
transform:translateZ(0);
}

Если вы анимируете текст и т. д., то вы можете переопределить это в более поздних классах, очевидно, - но вы также можете испытывать проблемы с индексом Z, используя это, поэтому обязательно имейте это в виду, если вы заметите, что вещи исчезают - все, что вам нужно сделать, это z-индекс:1 или 2 или что бы это ни было, последовательно говоря.

надеюсь, что это поможет!


body {
  text-rendering: optimizeLegibility;
}

проблема: мой сайт вел себя странно, все шрифты были жирными .

решение: я использовал следующие строки кода в файле css и файле заголовка и я удалил следующий код: @ import url ('https://fonts.googleapis.com/css?family=PT+Sans); http://fonts.googleapis.com/css?family=PT+Санс' отн='стилей' тип='текст и CSS'>