blocks|key|821545|text|我注意到chrome往往使字体更锐利，而firefox则更流畅。你对此无能为力。祝好运|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821546|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck

blocks|key|821585|text|css重置可能会解决这个问题，我不确定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821586|http://yuilibrary.com/yui/docs/cssreset/|offset|length|821587|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

css reset may fix the problem, I am not sure .

<a href="http://yuilibrary.com/yui/docs/cssreset/" rel="nofollow noreferrer">http://yuilibrary.com/yui/docs/cssreset/</a>

blocks|key|821627|text|不同的浏览器(和FWIW，不同的OSes)使用不同的字体渲染引擎，它们的结果并不相同。正如已经指出的，你对此无能为力(除非，很明显，你可以用图片或flash替换文本，或者用javascript%2Bcanvas实现你自己的渲染器--如果你问我，后者有点过分了)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821628|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).

blocks|key|1036770|text|对于来自FontSquirrel的ChunkFive字体，指定"+font+-weight:+normal;“阻止了火狐在标题中使用时的渲染效果看起来很糟糕。看起来Firefox试图对只有一个粗体的字体应用一个假粗体，而Chrome则不是。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036771|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.

blocks|key|1036810|text|对我来说，Chrome网页字体看起来很糟糕，直到我把SVG字体放在WOFF和TrueType之前。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036811|@font-face+{
++++font-family:+'source_sans_proregular';
++++src:+url('sourcesanspro-regular-webfont.eot');
++++src:+url('sourcesanspro-regular-webfont.eot?#iefix')+format('embedded-opentype'),
+++++++++url('sourcesanspro-regular-webfont.svg#source_sans_proregular')+format('svg'),
+++++++++url('sourcesanspro-regular-webfont.woff')+format('woff'),
+++++++++url('sourcesanspro-regular-webfont.ttf')+format('truetype');
++++font-weight:+normal;
++++font-style:+normal;
}|code-block|syntax|javascript|1036812|即便如此，Chrome的字体看起来还是比Firefox或IE要薄。Chrome在这一点上看起来不错，但我通常想在IE和Firefox中设置不同的字体。我混合使用IE条件注释和jQuery来根据浏览器设置不同的字体。对于Firefox，我让以下函数在页面加载时运行：|1036813|function+setBrowserClasses()+{
++++if+(true+==+$.browser.mozilla)+{
++++++++$('body').addClass('firefox');
++++}
}|1036814|然后在我的CSS中，我可以说|1036815|body+{+font-family:+"source_sans_proregular",+Helvetica,+sans-serif;+}
body.firefox+{+font-family:+"source_sans_pro_lightregular",+Helvetica,+sans-serif;+}|1036816|同样，在IE条件注释中包含的仅限IE的样式表中，我可以这样说：|1036817|body+{+font-family:+"source_sans_pro_lightregular",+Helvetica,+sans-serif;+}|1036818|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:

<pre><code>@font-face {
 font-family: 'source_sans_proregular';
 src: url('sourcesanspro-regular-webfont.eot');
 src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
 url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
 url('sourcesanspro-regular-webfont.woff') format('woff'),
 url('sourcesanspro-regular-webfont.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</code></pre>

Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:

<pre><code>function setBrowserClasses() {
 if (true == $.browser.mozilla) {
 $('body').addClass('firefox');
 }
}
</code></pre>

Then in my CSS, I can say

<pre><code>body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
</code></pre>

Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:

<pre><code>body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
</code></pre>

blocks|key|1036860|text|若要避免不同浏览器之间的字体差异，请避免使用css样式更改字体的外观。使用font-size属性通常是安全的，但您可能希望避免执行font-weight:+bold之类的操作；相反，您应该下载粗体版本的字体，并为其指定另一个字体系列名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036861|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.

blocks|key|821779|text|我发现这很好用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821780|-webkit-text-stroke:+0.7px;|code-block|syntax|javascript|821781|或|821782|-webkit-text-stroke:+1px+rgba(0,+0,+0,+0.7);|821783|尝试使用"0,7“值来根据需要进行调整。在定义正文字体的位置添加行。|821784|下面是一个示例：|821785|body+{
++++font-size:+100%25;
++++background-color:+#FFF;
++++font-family:+'Source+Sans+Pro',+sans-serif;
++++margin:+0;
++++font-weight:+lighter;
++++-webkit-text-stroke:+0.7px;|821786|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

i found this to be working great : 

<pre><code>-webkit-text-stroke: 0.7px;
</code></pre>

or

<pre><code>-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
</code></pre>

experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.

here is an example:

<pre><code>body {
 font-size: 100%;
 background-color: #FFF;
 font-family: 'Source Sans Pro', sans-serif;
 margin: 0;
 font-weight: lighter;
 -webkit-text-stroke: 0.7px;
</code></pre>

blocks|key|821838|text|截至2014年，Chrome仍然有一个已知的bug，如果使用的webfont安装了本地副本，它会选择使用本地版本，因此会导致OP呈现问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821839|要解决此问题，可以执行以下操作：|821840|首先，瞄准Chrome浏览器或OSX+(对我来说，问题只出现在OSX+Chrome上)。我已经使用了这个简单的JS来快速检测浏览器/OS，你可以选择用你习惯的任何其他方式来做这件事：|821841|https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js|offset|length|821842|现在，您可以针对浏览器/OS创建以下“新”字体：|821843|@font-face+{
++++font-family:+'Custom+PT+Sans';++++
++++src:+url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff)+format('woff');
++++font-weight:+normal;
++++font-style:+normal;
}|code-block|syntax|javascript|821844|字体URL与您的浏览器在嵌入google+webfont时使用的字体URL相同。如果您使用任何其他字体，只需相应地复制并更改URL即可。|821845|在此处获取网址http://fonts.googleapis.com/css?family=PT%2BSans:400,700&subset=latin,latin-ext|821846|您还可以重命名您的@font-face自定义字体系列别名。|821847|创建一个简单的CSS规则，以使用针对浏览器/OS或两者的字体：|821848|.mac+.navigation+a+{++++
++++font-family:+"Custom+PT+Sans",+"PT+Sans",+sans-serif;
}|821849|或|821850|.mac.webkit+p+{
++++font-family:+"Custom+PT+Sans",+"PT+Sans",+sans-serif;
}|821851|好了。只要在需要的地方应用font-family规则即可。|821852|entityMap|0|LINK|mutability|MUTABLE|url|1|http://fonts.googleapis.com/css?family=PT%2BSans:400,700&subset=latin,latin-ext^0|0|0|0|0|2A|0|0|0|0|0|7|25|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@$H|1J|I|1K|1|1L]]|A|$]]|$1|J|3|K|5|6|7|1M|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1N|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1P|8|@]|9|@$H|1Q|I|1R|1|1S]]|A|$]]|$1|U|3|V|5|6|7|1T|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1U|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|N|7|1V|8|@]|9|@]|A|$O|P]]|$1|10|3|11|5|6|7|1W|8|@]|9|@]|A|$]]|$1|12|3|13|5|N|7|1X|8|@]|9|@]|A|$O|P]]|$1|14|3|15|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|G]]|1D|$5|19|1A|1B|A|$1C|1E]]]]

As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues. 

To fix this, you can do the following:

First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:

<a href="https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js" rel="nofollow">https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js</a>

Now that you can target a Browser/OS, create the following 'new' font:

<pre><code>@font-face {
 font-family: 'Custom PT Sans'; 
 src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
 font-weight: normal;
 font-style: normal;
}
</code></pre>

The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly. 

Get the URL here <a href="http://fonts.googleapis.com/css?family=PT+Sans:400,700&#038;subset=latin,latin-ext" rel="nofollow">http://fonts.googleapis.com/css?family=PT+Sans:400,700&#038;subset=latin,latin-ext</a>

You may also rename your @font-face custom font-family alias.

Create a simple CSS rule to use that font targeting Browser/OS or both:

<pre><code>.mac .navigation a { 
 font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
</code></pre>

Or 

<pre><code>.mac.webkit p {
 font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
</code></pre>

Done. Just apply the font-family rule wherever you need to.

blocks|key|1036948|text|有几个修复方法。但通常可以使用以下命令来修复：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036949|html+{
++-webkit-font-smoothing:+antialiased;
++-moz-osx-font-smoothing:+grayscale;
}|code-block|syntax|javascript|1036950|有时这可能是由于font-weight造成的。如果您在@font-face中使用自定义字体，请确保您的font-weight语法正确。在@font-face中，font-weight/font-style属性的思想是在不同的font-family声明中保留您的@font-face名称，同时使用不同的font-weight或font-style，以便这些值在CSS中正常工作(并加载您的自定义字体--而不是“假粗体”)。|offset|length|style|CODE|1036951|我见过-webkit-text-stroke:+0.2px;提到要加厚webkit字体，但我认为如果你使用我给出的第一段代码，你可能不需要这个。|1036952|entityMap^0|0|0|8|B|R|A|1F|B|1W|A|28|B|2K|A|34|B|3M|A|46|B|4I|A|0|3|R|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]|$I|17|J|18|K|L]|$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1D|8|@$I|1E|J|1F|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|P|$]]

There are a few fixes. But usually it can be fixed with:

<pre><code>html {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
</code></pre>

Sometimes it can be due to <code>font-weight</code>. If you are using a custom font with <code>@font-face</code> make sure your <code>font-weight</code> syntax is correct. In <code>@font-face</code> the idea of the <code>font-weight</code>/<code>font-style</code> properties are to keep your <code>font-family</code> name across different <code>@font-face</code> declarations while using different <code>font-weight</code> or <code>font-style</code> so those values work properly in CSS (and load your custom font -- not "fake bold").

I've seen <code>-webkit-text-stroke: 0.2px;</code> mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.

blocks|key|821989|text|我有几个月的时间都有同样的问题。最后，它通过禁用Chrome浏览器设置中的以下设置来工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|821990|将"Accelerated+2D+Canvas“设置为"Disabled”(在浏览器的地址栏中，转到chrome://flag#disable-accelerated-2d-canvas，更改设置，重新启动浏览器)。|821991|由于这个问题的修复已经明显改变，我建议如果这个修复停止工作，我建议在将来关闭任何硬件加速的文本渲染/2D渲染功能。|821992|在Google+Chrome+55上，这个问题似乎又出现了。正如预期的那样，修复是禁用硬件加速，它只是改变了位置。|821993|新的修复(对我来说)似乎是：|821994|Settings+->显示高级设置...->系统取消选中"Use+hardware+acceleration+when+available“|821995|https://superuser.com/questions/821092/chromes-fonts-look-off|offset|length|821996|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|1P|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|M]]]]

I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.

Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)

Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.

On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.

The new fix (for me) appears to be:

Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"

<a href="https://superuser.com/questions/821092/chromes-fonts-look-off">https://superuser.com/questions/821092/chromes-fonts-look-off</a>

blocks|key|822036|text|问题可能更多的是我们没有在CSS中设置的内容，而不是我们设置的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|822037|在我的例子中，FF在默认的Times+New+Roman中显示文本，而Chrome则像预期的那样使用蒙特瑟拉特。|822038|这恰好是因为在Chrome中，我将Montserrat设置为默认值，而FF没有默认值。|822039|所以，我认为浏览器的一些不同之处在于浏览器的配置，而不是我的CSS。|822040|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

The issue might be more what we don't set in our CSS than what we do set. 
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected. 
This happens to be because in Chrome I set Montserrat as the default, while FF has no default. 
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.

I am using Google Web Font's PT-sans

<pre><code>font-family: 'PT Sans',Arial,serif;
</code></pre>

but it looks different in Chrome and Firefox 

Is there anything that I need to add so that it looks same in all browsers?

Fonts looks different in Firefox and Chrome

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我正在使用Google Web Font的PT-sansfont-family: 'PT Sans',Arial,serif;但它在Chrome和Firefox中看起来不同有没有什么需要我添加的，以便它在所有浏览器中看起来都一样？

问Firefox和Chrome中的字体外观不同
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firefox和Chrome中的字体外观不同EN