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

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

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

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

Вот код @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;
}

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

Ответ 1

Вы используете шрифт 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 Fonts.

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

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

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

Сглаживание тусклого текста в WebKit - Крисом Койером.

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

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

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

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

Кстати это выглядит хорошо для меня...:)

Для получения дополнительной информации:

Более внимательный взгляд на рендеринг шрифтов - Тимом Аренсом

УДАЧА!

Ответ 2

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

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

Ответ 3

У вас должны быть отдельные объявления @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 доступен только в обычных и жирных весах.

Ответ 4

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 - это исправление - это поучительная статья по этой проблеме.

Ответ 5

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

-webkit-text-stroke: 0.25px;

Ответ 6

Предположим, вы используете шрифт в теге заголовка. Если да, попробуйте установить вес шрифта более светлым:

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

Ответ 7

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

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

Удачи:)

Ответ 8

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

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

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

Ответ 9

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

Ответ 10

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

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

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

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

Ответ 11

body {
  text-rendering: optimizeLegibility;
}

Ответ 12

Проблема: мой сайт действовал странно, когда все шрифты выделены жирным шрифтом.

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