为什么 FireFox 不能正确显示我的文本 (Arial)答案

【问题标题】：Why is FireFox not properly displaying my text (Arial)为什么 FireFox 不能正确显示我的文本 (Arial)
【发布时间】：2022-07-16 02:20:14
【问题描述】：

我在 Firefox 上遇到了一个奇怪的问题。我有一个<svg> 元素，里面有一些<text>。 svg 相对于父级缩放。现在我注意到Firefox 上发生了一些奇怪的事情，我的文字（特别是Arial 字体）。基本上，在调整窗口大小时，一旦容器大于 550 像素，它就会显示比应有的字体大得多的字体。

这是Fiddle。只需调整预览屏幕的大小，看看645px 和652px 之间会发生什么。

下面是我调整窗口大小的 gif。您可以清楚地看到，一旦containerWidth 超过一定宽度，文本就会完全改变。几乎好像它变得更大胆了：

https://gyazo.com/27b8284b0e3b4de88a36795a292b1bb3

我还附上了两张截图：

字体看起来很奇怪：

字体看起来正常：

我读过here，默认情况下，FireFox 显示的字体比 Chrome 和 Edge 更“粗”，但这并不能解释它仅在容器超过一定宽度时才会出现的事实......

这是什么原因造成的，我该如何解决？

【问题讨论】：

请提供一个包含您的 SVG 的工作 sn-p - 请参阅 stackoverflow.com/help/minimal-reproducible-example

标签： javascript html css firefox fonts

【解决方案1】：

这种呈现行为有几个原因：

Arial 拥有非常成熟的hinting instructions。
实际上是优化低分辨率渲染的好概念。不幸的是，不同的浏览器（在不同的操作系统上）会以完全不同的方式呈现相同的字体。有时，由于像素网格对齐，您会在某些应用程序中看到过粗（或弄脏）的字形词干（如“病”中）。

您的“文本块”被分割成许多 <text> 元素，导致某些尺寸的间距奇怪。

减轻这种影响的解决方法

您可以改用<foreignObject>：
Arial 将使用亚像素渲染进行渲染。
text-rendering: geometricPrecision 可以在某些大小上稍微减轻这种影响——但也可能在其他字体大小上引入类似的问题:(

p,
text {
  font-family: Arial, sans-serif;
  font-size: 11.5px;
}

.container {
  border: 1px solid #ccc;
  overflow: auto;
  resize: both;
  width: 90%;
}

svg {
  border: 1px solid red;
  display: inline-block;
  width: 45%;
}

.textRendering text {
  text-rendering: geometricPrecision!important;
}

<p>Resize me</p>
<div class="container">


  <svg class="textRendering " viewBox="0 100 595 240" xmlns="http://www.w3.org/2000/svg">
            <text x="50" y="150">text-rendering:<tspan x="50" dy="12">geometricPrecision</tspan></text>
            <g class="gScale">
            <text x="220" y="148.15">
                Lorem
            </text>
            <text x="255.8125" y="148.15">
                ipsum
            </text>
            <text x="289.703125" y="148.15">
                dolor
            </text>
            <text x="318.484375" y="148.15">
                sit
            </text>
            <text x="333.1875" y="148.15">
                amet,
            </text>
            <text x="365.15625" y="148.15">
                consectetur
            </text>
            <text x="427.8125" y="148.15">
                adipiscing
            </text>
            <text x="482.171875" y="148.15">
                elit,
            </text>
            <text x="503.28125" y="148.15">
                sed
            </text>
            <text x="525.03125" y="148.15">
                do
            </text>
            <text x="220" y="163.1">
                eiusmod
            </text>
            <text x="266.671875" y="163.1">
                tempor
            </text>
            <text x="305.671875" y="163.1">
                incididunt
            </text>
            <text x="357.46875" y="163.1">
                ut
            </text>
            <text x="370.265625" y="163.1">
                labore
            </text>
            <text x="405.4375" y="163.1">
                et
            </text>
            <text x="418.234375" y="163.1">
                dolore
            </text>
            <text x="453.40625" y="163.1">
                magna
            </text>
            <text x="491.78125" y="163.1">
                aliqua.
            </text>
            <text x="528.875" y="163.1">
                Ut
            </text>
            <text x="543.578125" y="163.1">
                enim
            </text>
            <text x="220" y="178.04999999999998">
                ad
            </text>
            <text x="236" y="178.04999999999998">
                minim
            </text>
            <text x="269.875" y="178.04999999999998">
                veniam,
            </text>
            <text x="313.359375" y="178.04999999999998">
                quis
            </text>
            <text x="337.671875" y="178.04999999999998">
                nostrud
            </text>
            <text x="379.234375" y="178.04999999999998">
                exercitation
            </text>
            <text x="441.25" y="178.04999999999998">
                ullamco
            </text>
            <text x="484.09375" y="178.04999999999998">
                laboris
            </text>
            <text x="521.1875" y="178.04999999999998">
                nisi
            </text>
            <text x="541.65625" y="178.04999999999998">
                ut
            </text>
            <text x="220" y="192.99999999999997">
                aliquip
            </text>
            <text x="256.453125" y="192.99999999999997">
                ex
            </text>
            <text x="271.8125" y="192.99999999999997">
                ea
            </text>
            <text x="287.8125" y="192.99999999999997">
                commodo
            </text>
            <text x="341.515625" y="192.99999999999997">
                consequat.
            </text>
            <text x="400.984375" y="192.99999999999997">
                Duis
            </text>
            <text x="427.203125" y="192.99999999999997">
                aute
            </text>
            <text x="452.796875" y="192.99999999999997">
                irure
            </text>
            <text x="479.015625" y="192.99999999999997">
                dolor
            </text>
            <text x="507.796875" y="192.99999999999997">
                in
            </text>
            <text x="220" y="207.94999999999996">
                reprehenderit
            </text>
            <text x="291.609375" y="207.94999999999996">
                in
            </text>
            <text x="303.765625" y="207.94999999999996">
                voluptate
            </text>
            <text x="353.65625" y="207.94999999999996">
                velit
            </text>
            <text x="377.3125" y="207.94999999999996">
                esse
            </text>
            <text x="404.8125" y="207.94999999999996">
                cillum
            </text>
            <text x="437.40625" y="207.94999999999996">
                dolore
            </text>
            <text x="472.578125" y="207.94999999999996">
                eu
            </text>
            <text x="488.578125" y="207.94999999999996">
                fugiat
            </text>
            <text x="519.921875" y="207.94999999999996">
                nulla
            </text>
            <text x="220" y="222.89999999999995">
                pariatur.
            </text>
            <text x="264.765625" y="222.89999999999995">
                Excepteur
            </text>
            <text x="319.75" y="222.89999999999995">
                sint
            </text>
            <text x="340.859375" y="222.89999999999995">
                occaecat
            </text>
            <text x="390.09375" y="222.89999999999995">
                cupidatat
            </text>
            <text x="439.984375" y="222.89999999999995">
                non
            </text>
            <text x="462.375" y="222.89999999999995">
                proident,
            </text>
            <text x="510.34375" y="222.89999999999995">
                sunt
            </text>
            <text x="535.296875" y="222.89999999999995">
                in
            </text>
            <text x="547.453125" y="222.89999999999995">
                culpa
            </text>
            <text x="220" y="237.84999999999994">
                qui
            </text>
            <text x="238.5625" y="237.84999999999994">
                officia
            </text>
            <text x="271.609375" y="237.84999999999994">
                deserunt
            </text>
            <text x="319.578125" y="237.84999999999994">
                mollit
            </text>
            <text x="349.625" y="237.84999999999994">
                anim
            </text>
            <text x="377.765625" y="237.84999999999994">
                id
            </text>
            <text x="389.921875" y="237.84999999999994">
                est
            </text>
        </g>
        </svg>






  <svg class="original" viewBox="0 100 595 240" xmlns="http://www.w3.org/2000/svg">
            <text x="50" y="150">Original</text>

            <text x="220" y="148.15">
                Lorem
            </text>
            <text x="255.8125" y="148.15">
                ipsum
            </text>
            <text x="289.703125" y="148.15">
                dolor
            </text>
            <text x="318.484375" y="148.15">
                sit
            </text>
            <text x="333.1875" y="148.15">
                amet,
            </text>
            <text x="365.15625" y="148.15">
                consectetur
            </text>
            <text x="427.8125" y="148.15">
                adipiscing
            </text>
            <text x="482.171875" y="148.15">
                elit,
            </text>
            <text x="503.28125" y="148.15">
                sed
            </text>
            <text x="525.03125" y="148.15">
                do
            </text>
            <text x="220" y="163.1">
                eiusmod
            </text>
            <text x="266.671875" y="163.1">
                tempor
            </text>
            <text x="305.671875" y="163.1">
                incididunt
            </text>
            <text x="357.46875" y="163.1">
                ut
            </text>
            <text x="370.265625" y="163.1">
                labore
            </text>
            <text x="405.4375" y="163.1">
                et
            </text>
            <text x="418.234375" y="163.1">
                dolore
            </text>
            <text x="453.40625" y="163.1">
                magna
            </text>
            <text x="491.78125" y="163.1">
                aliqua.
            </text>
            <text x="528.875" y="163.1">
                Ut
            </text>
            <text x="543.578125" y="163.1">
                enim
            </text>
            <text x="220" y="178.04999999999998">
                ad
            </text>
            <text x="236" y="178.04999999999998">
                minim
            </text>
            <text x="269.875" y="178.04999999999998">
                veniam,
            </text>
            <text x="313.359375" y="178.04999999999998">
                quis
            </text>
            <text x="337.671875" y="178.04999999999998">
                nostrud
            </text>
            <text x="379.234375" y="178.04999999999998">
                exercitation
            </text>
            <text x="441.25" y="178.04999999999998">
                ullamco
            </text>
            <text x="484.09375" y="178.04999999999998">
                laboris
            </text>
            <text x="521.1875" y="178.04999999999998">
                nisi
            </text>
            <text x="541.65625" y="178.04999999999998">
                ut
            </text>
            <text x="220" y="192.99999999999997">
                aliquip
            </text>
            <text x="256.453125" y="192.99999999999997">
                ex
            </text>
            <text x="271.8125" y="192.99999999999997">
                ea
            </text>
            <text x="287.8125" y="192.99999999999997">
                commodo
            </text>
            <text x="341.515625" y="192.99999999999997">
                consequat.
            </text>
            <text x="400.984375" y="192.99999999999997">
                Duis
            </text>
            <text x="427.203125" y="192.99999999999997">
                aute
            </text>
            <text x="452.796875" y="192.99999999999997">
                irure
            </text>
            <text x="479.015625" y="192.99999999999997">
                dolor
            </text>
            <text x="507.796875" y="192.99999999999997">
                in
            </text>
            <text x="220" y="207.94999999999996">
                reprehenderit
            </text>
            <text x="291.609375" y="207.94999999999996">
                in
            </text>
            <text x="303.765625" y="207.94999999999996">
                voluptate
            </text>
            <text x="353.65625" y="207.94999999999996">
                velit
            </text>
            <text x="377.3125" y="207.94999999999996">
                esse
            </text>
            <text x="404.8125" y="207.94999999999996">
                cillum
            </text>
            <text x="437.40625" y="207.94999999999996">
                dolore
            </text>
            <text x="472.578125" y="207.94999999999996">
                eu
            </text>
            <text x="488.578125" y="207.94999999999996">
                fugiat
            </text>
            <text x="519.921875" y="207.94999999999996">
                nulla
            </text>
            <text x="220" y="222.89999999999995">
                pariatur.
            </text>
            <text x="264.765625" y="222.89999999999995">
                Excepteur
            </text>
            <text x="319.75" y="222.89999999999995">
                sint
            </text>
            <text x="340.859375" y="222.89999999999995">
                occaecat
            </text>
            <text x="390.09375" y="222.89999999999995">
                cupidatat
            </text>
            <text x="439.984375" y="222.89999999999995">
                non
            </text>
            <text x="462.375" y="222.89999999999995">
                proident,
            </text>
            <text x="510.34375" y="222.89999999999995">
                sunt
            </text>
            <text x="535.296875" y="222.89999999999995">
                in
            </text>
            <text x="547.453125" y="222.89999999999995">
                culpa
            </text>
            <text x="220" y="237.84999999999994">
                qui
            </text>
            <text x="238.5625" y="237.84999999999994">
                officia
            </text>
            <text x="271.609375" y="237.84999999999994">
                deserunt
            </text>
            <text x="319.578125" y="237.84999999999994">
                mollit
            </text>
            <text x="349.625" y="237.84999999999994">
                anim
            </text>
            <text x="377.765625" y="237.84999999999994">
                id
            </text>
            <text x="389.921875" y="237.84999999999994">
                est
            </text>
        </svg>


  <svg class="foreign" viewBox="0 100 595 240" xmlns="http://www.w3.org/2000/svg">
            <text x="50" y="150">foreignObject</text>
            <foreignObject x="224" y="125" width="60%" height="50%">
                <div xmlns="http://www.w3.org/1999/xhtml">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    </p>
                </div>
            </foreignObject>
        </svg>

</div>

【讨论】：