我有一个使用CSS3的@字体面嵌入自定义字体的Web应用程序。 到目前为止，这已经完全在IE和Firefox的作品。
有了Chrome，但是，自定义字体显示像素化和不光滑。 下面是对我在Firefox＆IE（顶部）和铬（底部）的字体的一个例子的屏幕片断的链接： 截图比较
这可能是很难看到在这样一个小样本截图的区别，但是，当这一切发生在页面上它是非常明显的。
下面是我如何使用@字体面在我的样式表的例子：
@font-face
{
font-family: 'MyFont';
src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
url('../Content/fonts/MyFont.ttf') format('truetype');
}
可能值得一提的，另一件事是，当我在虚拟机上运行的任何浏览器拉起来的网站，字体是超级波涛汹涌，比Chrome范例更糟。 当我用我的任何学校的电脑，它们都运行Win7的VMWare的桌面这种情况正在发生。 当我拉起从Windows 7虚拟机运行在一个朋友的Mac网站也刚好。
这是一个已知的问题，Chrome的开发者正在修复：
http://code.google.com/p/chromium/issues/detail?id=137692
要解决此之前的第一次尝试：
html {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
如果这不会为你工作，这项工作，围绕工作对我来说（以上没有修复Windows的Chrome）：
http://code.google.com/p/chromium/issues/detail?id=137692#c68
它的出现重新排列@字体面CSS规则，允许SVG的出现“第一”修复此问题。
例：
-before--------------
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
不幸的是，所有的浏览器渲染字体不同。 而一个看起来不错的一个可能有另一个麻烦。 这不是那么容易找到一个很好的字体为字体面...如果你想像素完美，你将不得不使用的图像。
但不是说使相当不错一切都失去了，这里有20种免费字体（！免费甚至商业用途）（我总是最后选中此列表）： http://speckyboy.com/2010/07/04/25-completely -免费的字体完美换fontface /
请记住，你不能承载的付费字体或你会分发它们，你可以遇到麻烦而告终。
您可能需要与optimizeLegibility玩： http://aestheticallyloyal.com/public/optimize-legibility/
而且还-webkit-字体平滑： http://maxvoltar.com/archive/-webkit-font-smoothing
它也可能使用的字体，字体松鼠生成器生成的网络字体和CSS中的字体加载值得： http://www.fontsquirrel.com/fontface/generator （虽然我不知道这会解决您的问题或不）
对我来说，最好的工作：
@font-face {
font-family: MyFont;
src: url("MyFont.ttf") format('truetype');
}
h1 {
font-family: MyFont;
-webkit-text-stroke: 0.5pt;
-webkit-font-smoothing: antialiased;
}
我会建议使用这样的：
-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
尝试添加-webkit-变换：translateZ（1px的）; 或其他3D转换。
说明：
Chrome提供了另一个错误 - 当3D变换应用模糊的文本，因此建议增加属性将模糊切碎文本和部分地解决这一问题。 这仍然是一个有点模糊，但在许多情况下，最好是再切碎之一。
例1（问题）： 切碎的文本 。 我在这里加旋转，以确保文本被砍伤。
例2（解决）： 半平滑文本 。 应用3D变换使文字变得模糊不清，因此切碎的文字看起来更光滑。
小问题是，看起来我们不能指定在CSS中的Chrome只有Windows版本，所以我们必须使用JavaScript来申请相应的类。
这个问题将在Chrome 37来解决。
http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html
