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

长时间搜索正确的字体后，我决定创建自己的字体。我将其基于一个photoshop Arial字体（pixelated = anti-aliassed：none）。在浏览器中更改自定义字体

这里是字体的Photoshop的再现

anti-aliassed:none font from photshop

后，我创建使用FontStruct具有完全相同的像素结构的字体，将在Photoshop中显示与每个单独的信。我创建了字体，在photoshop中测试了它，并且它在photoshop中运行得非常漂亮。它看起来完全一样。但之后我将其添加到我的网站以供使用，出于某种原因，浏览器水平缩小了字体。

website font rendition

为什么会在水平方向收缩？我的字体大小为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

来源

2015-01-04 user3565264

的图像显示了结果抗锯齿（字体平滑）以及缩小效果。这取决于浏览器，您应该确定测试的浏览器。收缩可能与抗锯齿有关。 –

您需要的文件名为.ttf这里转换http://www.fontsquirrel.com/tools/webfont-generator
从这里你会需要将字体文件（参考下文）上传到您的服务器。绝对URL不会与网页字体工作，所以把它局部
使用下面的代码

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>

来源

2015-01-04 07:34:30 verrucktfuchs

字体是从我在CSS中创建并链接的.ttf文件中提取的。 – user3565264

我添加了一个链接到上面的字体文件。带有.ttf的Photoshop 8px完美地显示了字体，但却可以创建阴影并缩小字体。仅限大写字母。 – user3565264

这工作。用这个设置转换它。谢谢！ – user3565264

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

回答

相关问题