1

我在不同的 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>

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

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

在第二台机器中，它呈现为

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

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

我真的不知道为什么会这样。请帮忙！！

4

0 回答 0