Почему мой шрифт выглядит по-другому?

Я использую CGF саранчи Resistance шрифт, который я получил от dafont.com Это, как шрифт должен выглядеть: http://www.dafont.com/cgf-locust-resistance.font и это, как это выглядит на моей странице: https://postimg.org/image/r2a1xcxun/Почему мой шрифт выглядит по-другому?

Как вы можете видеть буквы выглядят более раздавлено, особенно заметно на «F», «A» и «E». Вот мой CSS и HTML-код. У кого-нибудь есть идея, почему это так?

HTML:

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Gears Of War</title> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<header> 
    <h1>GEARS OF WAR</h1> 
</header> 
<body> 
    <?php 
    // put your code here 
    ?> 
</body> 
</html>

CSS:

body { 
background-color: #1a1a1a; 
} 

header { 
font-family: CGF Locust Resistance; 
letter-spacing: 30px; 
text-align: center; 
font-size: 28px; 
color: lightgray; 
text-shadow: 
-1.5px -1.5px 0 black, 
1.5px -1.5px 0 black, 
-1.5px 1.5px 0 black, 
1.5px 1.5px 0 black; 
}

Шрифта декларация:

@font-face { 
font-family: cgf_locust_resistanceregular; 
src: url('Downloads/cgf_locust_resistance-webfont.woff2') format('woff2'), 
    url('Downloads/cgf_locust_resistance-webfont.woff') format('woff'); 
font-weight: normal; 
font-style: normal; 

}

источник

2016-09-10 Cian

Может быть проблема с самим шрифтом или с тем, как браузер отображает шрифт. В FF и Safari это выглядит нормально, в Chrome это не так. –

Я пробовал его в FF, и он выглядит одинаково для меня – Cian

Можете ли вы опубликовать свою декларацию о шрифте? –

Проблема, вероятно, связано с тем, что h1 тег имеет стиль браузера по умолчанию, что силы шрифта вес жирным. Попробуйте установить нормальный шрифт для тега h1, и проблема не исчезнет.

Шрифт, вероятно, не очень хорошо сочетается с жирным стилем.

источник

2016-09-10 21:48:50

В этом была проблема! спасибо – Cian

Поместите свое имя шрифта в одинарных кавычках, как это семейство шрифтов: «CGF Locust Сопротивление ', потому что в вашем имени шрифта есть пробел.

источник

2016-09-10 19:26:55

Хотя я согласен с тем, что здесь используются кавычки, изображение показывает, что правильный шрифт используется браузером, где OP проверяет шрифт. Таким образом, добавление кавычек не решит проблему, что шрифт не отображается правильно (пробелы, которые малы). –

Котировки необходимы, иначе браузер будет неправильно истолковывать из-за пробела, он будет ожидать запятую. –

Затем вы можете попробовать добавить нормализованную таблицу стилей, которую вы можете получить из этого [link] (https://github.com/necolas/normalize.css/) –

font-family: "CGF Locust Resistance";

Если имя шрифта содержит бело-пространство, оно должно быть цитирует. Боковое примечание: одиночные кавычки должны использоваться при использовании атрибута «style» в HTML.

источник

2016-09-10 19:38:01

"dafont.com" предоставил файл "CGF Locust Resistance.ttf". Итак, вам нужно сгенерировать этот шрифт, чтобы получить (woff и woff2) файл. Вы можете создать это с here. Затем вы помещаете файл шрифта thos в свою папку шрифтов и должны вызывать их в вашем файле css. Я делаю видео, чтобы показать полный процесс. Смотрите видео, я думаю, что ваша концепция будет понятной. https://www.youtube.com/watch?v=SV1-VEAmM-0&feature=youtu.be

@font-face { 
    font-family: 'cgf_locust_resistanceregular'; 
    src: url('fonts/cgf_locust_resistance-webfont.woff2') format('woff2'), 
     url('fonts/cgf_locust_resistance-webfont.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 

} 

header { 
font-family: CGF Locust Resistance; 
letter-spacing: 30px; 
text-align: center; 
font-size: 28px; 
color: lightgray; 
text-shadow: 
-1.5px -1.5px 0 black, 
1.5px -1.5px 0 black, 
-1.5px 1.5px 0 black, 
1.5px 1.5px 0 black; 
}

источник

2016-09-10 20:16:38

Да, это не сработало – Cian

@Cian вы пробовали открыть автогенерированный cgf_locust_resistance-demo.html? Это выглядит хорошо для меня в Chrome. – derloopkat

а где я получу это от – Cian

Довольно уверен, что это потому, что у вас есть свои символы в верхнем регистре, символы с частицами вступает в силу, когда символы нижнего регистра используются, по крайней мере в соответствии со спецификациями шрифта. http://puu.sh/r6Ibi/31f3fc195a.png

источник

2016-09-10 20:23:35

Почему мой шрифт выглядит по-другому?

ответ

Смежные вопросы