在瀏覽器中更改自定義字體

Question

長時間搜索正確的字體後，我決定創建自己的字體。我將其基於一個photoshop Arial字體（pixelated = anti-aliassed：none）。

這裏是字體的Photoshop的再現

後，我創建使用FontStruct具有完全相同的像素結構的字體，將在Photoshop中顯示與每個單獨的信。我創建了字體，在photoshop中測試了它，並且它在photoshop中運行得非常漂亮。它看起來完全一樣。但之後我將其添加到我的網站以供使用，出於某種原因，瀏覽器水平縮小了字體。

爲什麼會在水平方向收縮？我的字體大小爲8像素，在8像素應該顯示完美，而是被水平擠壓。有什麼想法嗎？由於

的字體是用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>