菜鸟教程小白 发表于 2022-12-12 18:00:02

ios - IOS Safari上的自定义字体渲染


                                            <p><p>适用于 <code>iOS</code> 的 Safari 无法正确呈现自定义字体。这里出了什么问题？</p>

<p>注意字体的渲染有多么不同:在 chrome 中，笔触宽度更粗。在 Safari 中，字符间距更宽。我觉得chrome的渲染更正确。</p>

<p>更新:到目前为止，我合并了答案中的建议，但没有解决问题。我已经更新了 jsfiddle 和截图。现在我不使用粗体或任何默认粗体标签，只使用正常粗细的单一字体。我采纳了@Vizllx 的建议，尽管它似乎没有帮助。</p>

<p>jsfiddle 上的问题示例:</p>

<p> <a href="http://jsfiddle.net/c9eP5/9/" rel="noreferrer noopener nofollow">http://jsfiddle.net/c9eP5/9/</a> </p>

<pre><code>@font-face{
    font-family:Lola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format(&#39;woff&#39;);
    font-style:normal;
}
.test {
    font-size: 200%;
    font-family: Lola;
    -webkit-text-size-adjust:100%   
}
</code></pre>

<p>它在 Chrome 中的外观:</p>

<p> <img src="/image/zGlHc.png" alt="enter image description here"/> </p>

<p>这是它在 <code>iOS</code> Safari 上的样子(“Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25")</p>

<p> <img src="/image/IA3RC.png" alt="enter image description here"/> </p>

<p>在实际问题中，我使用常规 fontsquirrel 字体声明:</p>

<pre><code>@font-face {
    font-family: &#39;Lola&#39;;
    src: url(&#39;../fonts/lola/lola.eot&#39;);
    src: url(&#39;../fonts/lola/lola.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),
         url(&#39;../fonts/lola/lola.woff&#39;) format(&#39;woff&#39;),
         url(&#39;../fonts/lola/lola.ttf&#39;) format(&#39;truetype&#39;);
    font-weight: normal;
    font-style: normal;
}
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>首先，您将两种字体都标记为粗体，这可能会使某些浏览器感到困惑。</p>

<p>但是，在包含粗体字体时我遇到了类似的问题，解决方案不是将字体设置为粗体，而是让它以不同的名称正常运行，然后使用字体名称切换粗体。 <em>这不是 HTML 标准方式，但它有效。</em></p>

<p> <a href="http://jsfiddle.net/nothrem/ALqt8/6/" rel="noreferrer noopener nofollow">http://jsfiddle.net/nothrem/ALqt8/6/</a> </p>

<pre><code>@font-face{
    font-family:Lola;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola.woff) format(&#39;woff&#39;);
}
@font-face{
    font-family:Lola-bold;
    src:url(http://www.pmap.co/c/52c0d565/fonts/lola/lola_bold.woff) format(&#39;woff&#39;);
}
h1 {
    font-family: Lola-bold;
}
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于ios - IOS Safari上的自定义字体渲染，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/21029745/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/21029745/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - IOS Safari上的自定义字体渲染