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

标签 javascript html css firefox fonts

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

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

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

https://gyazo.com/27b8284b0e3b4de88a36795a292b1bb3

我还包括了 2 个屏幕截图:

字体看起来很奇怪:

enter image description here

字体看起来正常:

enter image description here

我读过 here FireFox 默认显示比 Chrome 和 Edge 更“粗”的字体，但这并不能解释它似乎只在容器超过一定宽度时才会发生的事实......

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

最佳答案

这种渲染行为有几个原因:

  1. Arial 非常复杂 hinting instructions .
    实际上，为低分辨率优化渲染是一个很好的概念。不幸的是，不同的浏览器(在不同的操作系统上)将以完全不同的方式呈现相同的字体。 有时，由于像素网格对齐，您会在某些应用程序中看到过粗(或弄脏)的字形茎(如“ill”)。

Hinting

  1. 你的“文本 block ”被分成了很多 <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>

关于javascript - 为什么 FireFox 不能正确显示我的文本 (Arial)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71398979/

上一篇：javascript - JQuery - 显示/隐藏类和验证表单

下一篇：postgresql - GCP 部署数据库连接错误 : Can't create a connection to host

相关文章：

javascript - 如何禁用在 Cell Handsontable 中写入并包含一个下拉列表

javascript - 防止在移动 Safari (iPad/iPhone) 中长按/长按时出现默认上下文菜单

html - Chrome - 找不到图像图标

javascript - 使用 Javascript 显示和隐藏带有下一个上一个按钮的图像

javascript - WebKit 和 Gecko 之间的样式行为差异

html - 将 html div 居中(边距 0 自动帮助)

javascript - 浏览器 Javascript 引擎总是单线程的？

javascript - 单击事件在 contenteditable div 中不起作用

html - CSS动画问题

javascript - 使用 Angular JS 中的 CKEditor 内容更新文本区域值

©2024 IT工具网  联系我们