CSS Safari 字体渲染问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31056543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari font rendering issues
提问by Pav Sidhu
As you can see below, the Texta-Light font in Chrome appears completely different with Safari. Chrome displays the font as I like but Safari's rendering on OS X and iOS looks too thin. The Safari image below is taken on iOS and as you can see for some reason the font appears as if there is two bits of text present.
如下图所示，Chrome 中的 Texta-Light 字体与 Safari 完全不同。Chrome 按我喜欢的方式显示字体，但 Safari 在 OS X 和 iOS 上的渲染看起来太薄了。下面的 Safari 图像是在 iOS 上拍摄的，正如您所看到的，出于某种原因，字体看起来好像有两位文本存在。
I've looked for a solution but found nothing which works. I tried using -webkit-font-smoothing: subpixel-antialiased;but according to this question, the code isn't working anymore.
我一直在寻找解决方案，但没有发现任何有效的方法。我尝试使用，-webkit-font-smoothing: subpixel-antialiased;但根据这个问题，代码不再工作。
Chrome:
铬合金：
Safari on iOS:
iOS 上的 Safari：
Here is the code for the images above:
下面是上面图片的代码：
h2 {
font-family: 'Texta-Light', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
}
Is there any solution to this?
有什么解决办法吗？
采纳答案by Pav Sidhu
Safari has an issue with fonts. The easiest fix for the duplicate text issue is clarifying the font-weight:
Safari 存在字体问题。解决重复文本问题的最简单方法是澄清字体粗细：
font-weight: 400;
Using Lucho's Javascript's text stroke solution along with specifying font-weight will make your text the same as it is on Chrome.
使用 Lucho 的 Javascript 文本笔画解决方案并指定字体粗细将使您的文本与 Chrome 上的文本相同。
回答by empedocle
There is a CSS property, text-rendering, which in Safari is by default set to optimizeSpeed. What you want to change is:
有一个 CSS 属性 text-rendering，它在 Safari 中默认设置为 optimizeSpeed。你想改变的是：
text-rendering:optimizeLegibility;
From https://css-tricks.com/almanac/properties/t/text-rendering/
来自https://css-tricks.com/almanac/properties/t/text-rendering/
There are four possible values:
有四个可能的值：
??auto (default) - The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. Be aware that different browsers interpret this value differently.
??auto（默认）- 浏览器在绘制文本时对何时优化速度、易读性和几何精度进行有根据的猜测。请注意，不同的浏览器对该值的解释不同。
? optimizeSpeed - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
? optimizeSpeed - 浏览器在绘制文本时强调渲染速度而不是易读性和几何精度。它禁用字距调整和连字。
??optimizeLegibility - The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.
??optimizeLegibility - 浏览器强调易读性而不是渲染速度和几何精度。这允许使用可能包含在某些字体的字体文件中的特殊字距调整和可选连字信息。
? geometricPrecision - The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. The geometricPrecision property allows for more fluid scaling. Note: Only WebKit browsers apply this fluid value, Gecko treats the value just like optimizeLegibility.
? geometryPrecision - 浏览器强调几何精度而不是渲染速度和易读性。字体的某些方面（例如字距调整）不会线性缩放，因此几何精度可以使使用这些字体的文本看起来不错。当缩放 SVG 字体时，浏览器会计算像素大小，然后四舍五入到最接近的整数。geometryPrecision 属性允许更流畅的缩放。注意：只有 WebKit 浏览器应用这个流体值，Gecko 把这个值当作 optimizeLegibility。
There is an additional setting -webkit-font-feature-settings, of which one of them is kerning:
还有一个额外的设置 -webkit-font-feature-settings，其中之一是字距调整：
-webkit-font-feature-settings
-webkit-font-feature-settings
h2 {
-webkit-font-feature-settings: "kern" 1;
}
回答by Guy
If, as per your comment, you are only serving .otf, you will need to serve the other file types too.
如果根据您的评论，您只提供.otf，则您还需要提供其他文件类型。
This could be causing an issue to do with iOs as until iOs 4.2, SVG was the only format to use custom fonts on the ipad or iphone.
这可能会导致与 iO 相关的问题，因为直到 iOs 4.2，SVG 是在 ipad 或 iphone 上使用自定义字体的唯一格式。
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
A great tool to use is Font Squirrel's Webfont Generator
一个很好用的工具是 Font Squirrel 的Webfont Generator
Edit:Also as mentioned in the comments the font-weightis set to boldby default and you are loading a lightfont.
编辑：也如评论中所述，默认情况下font-weight设置为bold并且您正在加载light字体。
回答by Lucho
I found a post which uses JS to adjust the text-stroke property. Here is the actual code:
我找到了一篇使用 JS 调整 text-stroke 属性的帖子。这是实际的代码：
$(document).ready(function(){
is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
is_opera = navigator.userAgent.indexOf("Presto") > -1;
is_mac = (navigator.userAgent.indexOf('Mac OS') != -1);
is_windows = !is_mac;
if (is_chrome && is_safari){
is_safari=false;
}
if (is_safari || is_windows){
$('body').css('-webkit-text-stroke', '0.5px');
}
});
You can modify the text-stroke of some other element. Hope it helps.
您可以修改某些其他元素的文本笔画。希望能帮助到你。
回答by ZwartyZ
Try this:
尝试这个：
html, body {
text-rendering: optimizeLegibility;
}
or if like that it doesn't work,
或者如果这样它不起作用，
html, body {
text-rendering: geometricPrecision;
}
回答by artnikpro
Based on @lucho's answer, I used same approach but I'm applying the fix as soon as <body>tag loads. This fixes the issue with too thin Open Sans font in iOS Safari.
根据@lucho 的回答，我使用了相同的方法，但我会在<body>标签加载后立即应用修复程序。这解决了 iOS Safari 中 Open Sans 字体太薄的问题。
<body>
<script>
(function () {
var ua = navigator.userAgent
var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && ua.indexOf('Chrome') === -1
if (isIOSSafari) {
document.body.style.webkitTextStroke = '.5px'
}
})()
</script>
ALTERNATIVE APPROACH:
替代方法：
Alternatively you can add a class like ios-safarito <html>tag and then apply CSS to it normally:
另外，您可以添加一个类像ios-safari到<html>标签，然后应用CSS给它正常：
<script>
(function () {
const ua = navigator.userAgent
const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari\//i.test(ua) && !ua.includes('Chrome')
if (isIOSSafari) document.documentElement.classList.add('ios-safari')
})()
</script>
</head>
CSS:
CSS：
.ios-safari {
-webkit-text-stroke: .5px;
}
回答by TaSvet
Work for me!!!
为我工作！！！
.text{
font-weight: unset;
-webkit-text-stroke: thin;
}
Try it...!
尝试一下...！
