如何检测设计与网站之间的差异？

Question

我有这个网站：link 我把图像更好地理解

这种差异困扰着我更多的背景和文字大小。 在photoshop中使用的字体是＆＃34; ArchivoNarrow常规＆＃34;，我把自己放在下面的CSS代码中

CODE CSS：

.details-footer{
  display: inline-block;
  width: auto;
  font-size: 9pt;
  color: white;
  font-family: ArchivoNarrow regular;
}

您能告诉我所有这些差异，我该如何解决？

提前致谢！

Answer 1

要添加字体，请将其插入index.php或任何文件中，该文件包含指向css文件的链接。
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'> 您需要在所有其他css链接上方插入此内容。

然后将以下行添加到您的css中，您需要它：
font-family: 'Archivo Narrow', sans-serif;

例如，将此应用于页脚：
.details-footer { font-family: 'Archivo Narrow', sans-serif; }

完成！

P.S。：将字体上传到您的服务器并不是一个好主意，您应该尽可能使用Google字体。

Answer 2

你定义了字体吗？如果不是，你这样做：

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

然后你需要将.woff字体文件上传到你的文件夹。