Пользовательский шрифт изменяется в браузере

Question

После длительного поиска нужного шрифта я решил создать свой собственный. Я основывал его на шрифте Arial, который был изменен (pixelated = anti-aliassed: none).

Вот фотошоп цветопередача шрифта

После, я создал шрифт с помощью FontStruct с точно такой же конфигурацией пикселя было бы показать в фотошопе с каждым отдельным письмом. Я создал шрифт, протестировал его в фотошопе, и он отлично работал в 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>