Я делаю преобразование Photoshop-to-XHTML, а разработчик веб-сайтов использовал шрифт Myriad Pro Semi-bold, который хорошо выглядит в файле photoshop, но когда я пытаюсь использовать полужирный вариант в CSS, он выглядит почти как обычный жирный шрифт, который слишком смел для моей цели. Есть ли способ добиться более красивого полужирного шрифта в HTML и CSS, или я просто застрял с "font-weight: 600;"?
Как установить шрифт "полужирный" с помощью CSS? Шрифт-вес 600 не делает его похожим на полужирный, который я вижу в своем файле Photoshop
Ответ 1
Практический способ: установить font-family на значение, которое является конкретным именем полужирного варианта, например
font-family: "Myriad pro Semibold"
если это имя. (Лично я использую свой собственный инструмент для перечисления шрифтов, который работает в Internet Explorer только для того, чтобы видеть шрифты в моей системе по именам, которые можно использовать в CSS. )
В этом подходе font-weight не требуется (и, вероятно, лучше не устанавливается).
В браузерах веб-браузеров плохо реализованы шрифты шрифта в книге: они не могут найти конкретную версию веса, кроме полужирного. Обходной путь заключается в том, чтобы включать информацию в фамилию шрифта, даже если это не то, как должны работать вещи.
Тестирование с помощью пользовательского интерфейса Segoe, который часто существует в разных версиях шрифтов в системах Windows, я смог сделать Internet Explorer 9 выбрать правильную версию при использовании логического подхода (с использованием семейства шрифтов Segoe UI и других font-weight), но это не удалось для Firefox 9 и Chrome 16 (только нормальная и жирная работа). Например, во всех этих браузерах настройка font-family: Segoe UI Light работает нормально.
Ответ 2
В CSS для свойства font-weight значение: normal по умолчанию - числовое значение 400 и bold до 700.
Если вы хотите указать другие веса, вам нужно указать значение числа. Это числовое значение должно поддерживаться для семейства шрифтов, которые вы используете.
Например, вы бы определили полужирный:
font-weight: 600;
Здесь JSFiddle, используя семейство шрифтов Open Sans, загруженное вышеуказанными весами.
Ответ 3
Для меня следующее работает хорошо. Просто добавьте его. Вы можете отредактировать его согласно вашему требованию. Это просто приятный трюк, который я использую.
text-shadow : 0 0 0 #your-font-color;
Ответ 4
font-family: 'Open Sans'; font-weight: 600; важно изменить на другое семейство шрифтов
Ответ 5
К середине 2016 года двигатель Chromium (v53) поддерживает только 3 стили подчеркивания:
Обычный текст, жирный и супер-жирный...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Ответ 6
Выберите шрифты, указав нужные вам веса при загрузке
Семейства шрифтов состоят из нескольких отдельных шрифтов
Например, extra-bold заставит шрифт выглядеть совсем иначе, скажем, в Photoshop, потому что вы выбираете другой шрифт. То же самое относится к курсиву, который может выглядеть совсем по-другому. Установка font-weight:800 или font-style:italic может привести к тому, что веб-браузер приложит максимум усилий для увеличения или уменьшения нормального шрифта в семье.
Несмотря на то, что вы загружаете семейство шрифтов, вы должны указать вес и стили, необходимые для некоторых веб-браузеров, чтобы позволить вам выбрать другой шрифт в семействе с помощью font-weight и font-style.
Пример
В этом примере указываются светлые, нормальные, обычные курсивные, полужирные и особо полужирные шрифты в семействе шрифтов Open Sans:
<html>
<head>
<link rel="stylesheet"
href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800'; return false;">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>