Html 不同XP计算机中的字体格式不一致
在不同的XP机器中，我面临一个自定义字体呈现方式不同的问题 我正在为我的应用程序使用svg格式的自定义字体，但问题是在一些机器中，我观察到文本的包装方式不同。 我们只需要为我们的应用程序使用基于webkit的浏览器。所以我在WindowsSafari和Chrome中进行了测试。两者的结果相同。 我做了一个小的POC来复制这个问题。代码如下：Html 不同XP计算机中的字体格式不一致,html,css,custom-font,Html,Css,Custom Font,在不同的XP机器中，我面临一个自定义字体呈现方式不同的问题 我正在为我的应用程序使用svg格式的自定义字体，但问题是在一些机器中，我观察到文本的包装方式不同。 我们只需要为我们的应用程序使用基于webkit的浏览器。所以我在WindowsSafari和Chrome中进行了测试。两者的结果相同。 我做了一个小的POC来复制这个问题。代码如下： <html> <head> <style type="text/css"> html, body
<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>
html，正文
{
/* http://www.quirksmode.org/css/100percheight.html */
身高：100%；
/*防止浏览器装饰*/
保证金：0；
填充：0；
边界：0无；
/*文本呈现：优化易读性*/
字体系列：custFont！重要；
}
身体{
-webkit字体平滑：抗锯齿；
/*-moz字体平滑：抗锯齿；-在FF中不再可用*/
字体平滑：抗锯齿；
/*webkit文本笔划：1px透明*/
/*文本阴影：0.01×rgba（0,0,0,0.1）*/
/*字母间距：-0.06em*/
}
img{边框：0无；}
@字体{
字体系列：“custFont”；
src:local（'custFontRegular'）、url（'font/custFontRegular.svg'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“custFont”；
src:local（'custFontBold'）、url（'font/custFontBold.svg'）格式（'svg'）；
字体大小：粗体；
字体风格：普通；
}
@字体{
字体系列：“custFont”；
src:local（'custFontBoldItalic'）、url（font/custFontBoldItalic.svg'）格式（'svg'）；
字体大小：粗体；
字体：斜体；
}
@字体{
字体系列：“custFont”；
src:local（'custFontItalic'）、url（'font/custFontItalic.svg'）格式（'svg'）；
字体：斜体；
}
这是一个缩放文本示例。
这是一个没有缩放的示例文本。
这是一个大字体缩放文本示例。
这是一个没有缩放和大字体的示例文本。
缩放 因此，您可以看到文本换行是不同的，需要保持一致
我真的不知道为什么会这样。请帮忙 用户是否可能在浏览器或操作系统中增加了字体大小？