Question

我在不同的XP机器上遇到了自定义字体渲染问题。

我正在使用svg格式的自定义字体用于我的应用程序，但问题是在我观察到的一些机器中，文本的包装方式不同。我们只需要为我们的应用程序使用基于webkit的浏览器。所以我在Windows Safari和Chrome中进行了测试。两者都给出了相同的结果。我做了一个小POC来复制这个问题。代码如下：

<html>
<head>
<style type="text/css">
          html, body


    {
                /* http://www.quirksmode.org/css/100percheight.html */
                height: 100%;
                /* prevent browser decorations */
                margin: 0;
                padding: 0;
                border: 0 none;
                /*text-rendering:optimizeLegibility;*/
                font-family: custFont !important;
            }
            body {
                -webkit-font-smoothing: antialiased;
                /* -moz-font-smoothing: antialiased; - No longer available in FF */
                font-smoothing: antialiased;
                /*webkit-text-stroke: 1px transparent;*/
                /*text-shadow: 0 0 1px rgba(0,0,0,0.1);*/
                /*letter-spacing: -0.06em;*/
            }
            img { border: 0 none; }

             @font-face {
                font-family: 'custFont';    
                src: local('custFontRegular'), url('fonts/custFontRegular .svg') format('svg'); 
                font-weight: normal;
                font-style: normal;
            }
            @font-face {
                font-family: 'custFont';
                src: local(' custFontBold'), url('fonts/custFontBold.svg') format('svg'); 
                font-weight: bold;
                font-style: normal;
            }
            @font-face {
                font-family: 'custFont';
                src: local('custFontBoldItalic'), url(fonts/custFontBoldItalic.svg') format('svg'); 
                font-weight: bold;
                font-style: italic;
            }
            @font-face {
                font-family: 'custFont';
                src: local('custFontItalic'), url('fonts/custFontItalic.svg') format('svg'); 
                font-style: italic;
            }
        </style>
</head>

<body>
<div id="div1" style="
    -webkit-transform: translate(320px,0px) scale(1.5,1.5);
    padding-top: 50;">
    <div name="wrapper" style="width: 179 px; height: 20 px;">
        <label><span style="font-size:12px;">This is a sample text with scaling.</span></label>
    </div>
</div>

<div id="div2" style="padding-top: 50;">
    <div name="wrapper" style="width: 195 px; height: 20 px;">
        <label><span style="font-size:12px;">This is a sample text with no scaling.</span></label>
    </div>
</div>

<div id="div3" style="
    -webkit-transform: translate(320px,0px) scale(1.5,1.5);
    padding-top: 50;">
    <label><span style="font-size:18px;">This is a sample text with scaling and in large font.</span></label>
</div>

<div id="div4" style="padding-top: 50;">
    <label><span style="font-size:18px;">This is a sample text with no scaling and in large font.</span></label>
</div>

</body>
</html>

我在一台机器上将第一个文本呈现为

这是一个带缩放的示例文本。

并在第二台机器中呈现为

这是一个带有
的示例文本缩放。

所以你看到文本包装是不同的，需要保持一致

我真的很无知为什么会这样。请帮忙!!

不同XP机器中的字体再现不一致

0 个答案: