Question

我正在使用我从dafont.com获得的CGF Locust Resistance字体这是字体的外观：http://www.dafont.com/cgf-locust-resistance.font这就是它在我的网页上的显示方式：https://postimg.org/image/r2a1xcxun/

正如你所看到的那些字母看起来更加压扁，特别是在＆＃34; F＆＃34; ，＆＃34; A＆＃34;和＆＃34; E＆＃34;。这是我的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;

}

Answer 1

font-family: "CGF Locust Resistance";

如果字体名称包含空格，则必须引用。附注：在HTML中使用“style”属性时，必须使用单引号。

Answer 2

＆＃34; dafont.com＆＃34;提供了＆＃34; CGF Locust Resistance.ttf＆＃34;文件。因此，您需要生成此字体以获取（woff和woff2）文件。您可以从here生成此内容。然后你将thos字体文件放在你的fonts文件夹中，需要在你的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;
}

Answer 3

问题可能是由于 h1 标记具有默认浏览器样式，强制字体粗细为粗体。尝试将h1标签的font-weight设置为normal，问题应该消失。

字体可能不适合使用大胆的样式。

Answer 4

将您的字体名称放在单引号中，例如此font-family：＆＃39; CGF Locust Resistance＆＃39;因为你的字体名称中有一个空格。

Answer 5

非常确定这是因为你的字符是大写的，带有粒子的字符在使用小写字符时生效，至少根据字体规范。 http://puu.sh/r6Ibi/31f3fc195a.png

为什么我的字体看起来不一样？

5 个答案: