网站字体在网络主机上上传之前在计算机上看到的不同。怎么纠正？

Question

我正在建立一个网站，我使用的字体是“PT Sans Narrow”

Chrome和许多浏览器似乎都没有这种字体。

有什么方法可以在上传时将此字体包含在网站中，以便观众可以看到PT Sans Narrow？

可以看到该网站here

有人可能会看到，“嗨！我......”等等不在PT Sans Narrow中。

如何制作该字体以及所有其他PT Sans Narrow？

非常感谢帮助！

Answer 1

您可能希望在标题中添加链接到该字体。

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

然后，你的html将需要这样的东西：

<span class="pt-sans-narrow">Hi! I am ...</span>

你的css看起来像这样：

#pt-sans-narrow {
    font-family: 'PT Sans Narrow', sans-serif;
}

修改

在查看您的网站后，您已经在正文中的style.css文件中调用该字体，因此如果您只是将链接添加到标题中，它们都可以正常工作。

Answer 2

您可以下载字体文件并将其加载到CSS中。

加载并将其用作

@font-face {
    font-family: "Custom font";
    src: url("../fonts/customFont-Regular.ttf");
}

在样式表中。

另见： Using custom fonts using CSS?

Answer 3

在阅读你的评论并查看截图后，我认为PT Sans Narrow并不是你所追求的。因为问题是关于PT Sans Narrow，我的另一个答案仍然存在，但这里有一些建议：

尝试将此添加到标题中，代替PT Sans Narrow的两个实例：

<link href='http://fonts.googleapis.com/css?family=Lato:400,300|Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>

然后，您可以使用身体的字体。这些字体与您所使用的类似，您可以执行以下操作：

body {
   font-family: 'Lato', sans-serif;
   font-weight: 300;
}

我认为这更像是你所追求的。尝试自定义，也可以通过更改

font-weight:400;

或

font-family: 'Source Sans Pro', sans-serif;

玩弄它，让我知道你想出了什么。