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

Question

经过长时间搜索正确的字体后，我决定创建自己的字体。我根据一个photoshop Arial字体进行了调整（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>