css - 自定义字体在浏览器中更改

Question

经过长时间寻找合适的字体后，我决定创建自己的字体。我基于一个 photoshop Arial 字体，它是 alised (pixelated = anti-aliassed:none)。

这是字体的 photoshop 再现

之后，我使用 FontStruct 创建了一种字体，其像素配置与每个字母在 photoshop 中显示的完全相同。我创建了字体，在 photoshop 中对其进行了测试，它在 photoshop 中的效果非常好。它看起来完全一样。但是后来我将它添加到我的网站上以供使用，并且由于某种原因浏览器水平缩小了字体。

为什么横向收缩了？我的字体大小是 8px，在 8px 时它应该可以完美显示，但它被水平挤压了。有什么想法吗？谢谢

字体与css链接

@font-face {
  font-family: 'Arial Pixel';
  src: url('ArialPixel.ttf');
}

并通过h1标签显示

h1 {
    text-align    : center; 
    color         : #FFF;
    font          : 8px 'Arial Pixel'; }

Font is here

Answer 1

1. 您需要在此处转换 .ttf 文件 http://www.fontsquirrel.com/tools/webfont-generator
2. 从这里您需要将字体文件(在下面引用)上传到您的服务器。绝对 URL 不适用于网络字体，因此请将其保留在本地
3. 使用下面的代码

CSS

<style type="text/css">
@font-face {
    font-family: 'arial_pixelregular';
    src: url('arialpixel-webfont.eot');
    src: url('arialpixel-webfont.eot?#iefix') format('embedded-opentype'),
         url('arialpixel-webfont.woff2') format('woff2'),
         url('arialpixel-webfont.woff') format('woff'),
         url('arialpixel-webfont.ttf') format('truetype'),
         url('arialpixel-webfont.svg#arial_pixelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-family: 'arial_pixelregular';
    font-weight: normal;
}
</style>

HTML

<h1>ABC</h1>