如下所示，Chrome中的Texta-Light字体与Safari完全不同。Chrome显示我喜欢的字体，但是Safari在OS X和iOS上呈现出来太细了。下面的Safari图像是在iOS上拍摄的，您可以看到由于某种原因，该字体似乎存在两个文本位。
我已经寻找解决方案，但没有找到有效的方法。我尝试使用-webkit-font-smoothing: subpixel-antialiased;但是根据这个问题，该代码不再起作用。
Chrome：
iOS的Safari：
以上是图像的代码：
h2 {
font-family: 'Texta-Light', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
}
有没有解决这个问题的方案？
有一个CSS属性，text-rendering，在Safari中默认设置为optimizeSpeed。您想要更改的是：
text-rendering:optimizeLegibility;
来自https://css-tricks.com/almanac/properties/t/text-rendering/
有四种可能的值：
• auto (默认) - 浏览器会在绘制文本时根据速度、可读性和几何精度进行智能优化。请注意，不同的浏览器对该值的解释不同。
• optimizeSpeed - 浏览器在绘制文本时强调渲染速度而非可读性和几何精度。它禁用字距和连字。
• optimizeLegibility - 浏览器强调可读性而非渲染速度和几何精度。这使得某些字体中包含的特殊字距和可选连字信息可以使用。
• geometricPrecision - 浏览器强调几何精度而非渲染速度和可读性。某些字体的某些方面（如字距）不是线性缩放的，因此geometricPrecision可以使使用这些字体的文本看起来很好。当SVG字体被缩放时，浏览器计算像素大小，然后四舍五入到最近的整数。geometricPrecision属性允许更流畅的缩放。注意：只有WebKit浏览器应用这个流体值，Gecko将这个值视为optimizeLegibility。
还有一个额外的设置-webkit-font-feature-settings，其中之一是字距：
-webkit-font-feature-settings
h2 {
-webkit-font-feature-settings: "kern" 1;
}
如果根据您的评论，您只提供.otf文件，则您还需要提供其他文件类型。
这可能会导致与iOS相关的问题，因为直到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 */
}
一个非常好用的工具是Font Squirrel的Webfont Generator
编辑：
还有，如评论中所述，默认情况下font-weight设置为bold，而你正在加载light字体。
font-weight: normal; 设置为你的 @font-face 吗？字体可能会以不同的粗细呈现。我无法在我的 iPhone 上更新你的代码进行测试，但我建议你这样做，因为目前你正在使用“轻”字体，但是 h2 具有默认的浏览器样式 bold。 - GuySafari在字体方面存在问题。最简单的解决重复文本问题的方法是澄清字体加粗程度：
font-weight: 400;
使用Lucho的Javascript文本描边解决方案，同时指定字体粗细将使您的文本与Chrome上的文本相同。
我发现一篇帖子使用JS来调整文本描边属性。以下是实际代码：
$(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');
}
});
你可以修改其他元素的文本描边。 希望能够帮助到你。
font-synthesis: none
font-weight: 400
试试这个：
html, body {
text-rendering: optimizeLegibility;
}
如果这样还不行的话，
html, body {
text-rendering: geometricPrecision;
}
基于@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>
您也可以将类（如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：
.ios-safari {
-webkit-text-stroke: .5px;
}
Work for me!!!
.text{
font-weight: unset;
-webkit-text-stroke: thin;
}
试一试...！
我使用了这种方法，它可以保持基于Chromium的浏览器字体与之前相同，只对Safari浏览器进行更改。
$(document).ready(function(){
if (navigator.userAgent.indexOf("Safari") == 125) {
$('body').css('-webkit-text-stroke', 'thin');
}
});
@supports (-webkit-touch-callout: none) {
body {
font-weight: 500;
}
}