为什么我的字体文字看起来如此大胆？
Ben*_*Ben 15 css fonts typography webfonts font-face
这是来自网页的Photoshop设计的图像:
和具有相同大小,重量等的网页:
正如您所看到的,文本在Web渲染上渲染得更厚,直到它看起来几乎完全不同的字体.
以下是文本附带的@ font-face代码:
@font-face {
font-family: "PT Sans";
src: url('fonts/151428223-PTS55F.eot');
src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
url('fonts/151428223-PTS55F.woff') format('woff'),
url('fonts/151428223-PTS55F.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
...以及作为参考,Photoshop中文本的设置:
Ano*_*ous 20
您在Photoshop中使用PT Sans字体,然后您已经在PC上安装了该字体.您可以尝试删除@ font-face代码并从PC加载已安装的PT Sans字体,这与您在Photoshop中使用的字体文件相同,以检查问题是否因为使用@ font-face代码或@ font-face格式文件.(例如没有@ font-face且没有额外的css)
<head>
<style>
body {
font-family: "PT Sans";
font-weight: normal;
font-style: normal;
font-size: 28px;
color: #454545;
text-align: center;
}
</style>
</head>
<body>
<p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>
您也可以尝试使用Google Fonts的 PT Sans .
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
(将上面的代码复制为<head>HTML文档中的第一个元素.)
至于-webkit-font-smoothing我认为它没有任何重大区别,但你可以阅读一篇关于它的好文章.
在WebKit中加强沉闷的文本 - 由Chris Coyier撰写.
我有Photoshop CC(2014),我已经从谷歌字体下载并安装了PT Sans ,我已经使用上面的HTML代码自己测试了这个问题,这就是结果:
1 - 您的图像和2 - 我的Photoshop CC 2014(抗锯齿平滑)
正如您所看到的,上面的文本在浏览器中呈现的方式与Photoshop中的消除锯齿效果不同如果您拥有相同的结果并且它看起来几乎完全与您不同,那么My Point是:
Windows,Linux,OS X和移动设备各自(可能)具有不同的文本呈现引擎.更不用说不同的浏览器每个都有自己的文本呈现默认值,因此无法保证您的字体呈现将在用户的系统上按预期显示.- 通过CSS-Tricks文本呈现
BTW它对我来说很好...... :)
有关更多信息:
仔细看看字体渲染 - 由蒂姆阿伦斯
祝好运!
- 这是一个很好的答案,我将用这个来帮助自己完成帮助非网页设计师成为网页设计师的任务.第1课:Photoshop!== Web. (2认同)
Bod*_*zio 14
首先,你试过用font-weight财产操纵吗？它不仅仅具有价值normal和bold价值.您可以尝试将其设置为100,200,...,900并查看字体重量是否正在变化(我认为这取决于您使用的字体).
其次,您可以尝试将以下其中一项添加到此字体:-webkit-font-smoothing: none;,-webkit-font-smoothing: antialiased;或-webkit-font-smoothing: subpixel-antialiased;.
Chrome 使许多字体变得很胖。不幸的是，我们求助于供应商前缀来解决字体渲染与设计应用程序中渲染效果不同的问题。这基本上是我们大多数网站的标准：/
\n\n我们使用占位符以防需要快速启用/禁用解决方法 (SCSS)：
\n\n%fix-fatty-fonts {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nhtml, body, button, input, select, textarea { @extend %fix-fatty-fonts;}\n你的字体在 Chrome 中看起来很糟糕 -here\xe2\x80\x99s 修复是关于这个问题的一篇有启发性的文章。
\n小智 5
@font-face对于您正在使用的常规和粗体字体权重,您应该有单独的声明(顶部的示例仅列出一个),例如.
@font-face {
font-family: "PT Sans";
src: url('fonts/PTSans-Regular.eot');
src: url('fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSans-Regular.woff') format('woff'),
url('fonts/PTSans-Regular.ttf') format('truetype'),
url('fonts/PTSans-Regular.svg#PTSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PT Sans";
src: url('fonts/PTSans-Bold.eot');
src: url('fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSans-Bold.woff') format('woff'),
url('fonts/PTSans-Bold.ttf') format('truetype'),
url('fonts/PTSans-Bold.svg#PTSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
另外,下面的CSS应该改进渲染 -
.selector {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
注意:标准PT Sans只有常规和粗体.
| 归档时间： |
|
| 查看次数： |
18826 次 |
| 最近记录： |