Question

我在IE10中正确显示以下代码时出现问题。我很满意它无法在IE9中工作＆lt;但根据caniuse.com连字（和真实类型）应该在IE10中按预期运行。是否有一项特殊规则需要这项工作？

以下是相关HTML：

<body>
<nav role = "navigation" class = "nav"> 
  <ul>
  <li>
    <a href="#branches"  class="selected">home</a>
  </li>
  <li >
    <a href="#trees">mobile</a>
  </li>
  <li>
    <a href="#path">portfolio</a>
 </li></li>
 <li><
   a href="#power">power</a>
 </li>
</ul> 
</nav>

这是CSS：

@font-face {
  font-family: "ui";
  src: url("../fonts/Live-Share-UI.eot");
  src: url("../fonts/Live-Share-UI.svg") format("svg");
  src: url("../fonts/Live-Share-UI.ttf");
  font-feature-settings: "dlig" 1; }


.nav, .header {
  font-family: ui;
  position: fixed;
  text-align: center;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto auto 1em auto;
  right: 0;
  height: 1.5em; }

这是一个较大项目的摘录，可以在live_share_test.aws.af.cm

看到

目前在Windows上使用Chrome版本27.0.1453.94 m，Opera v 12，Firefox 19.0.2以及iPhone 4上当前安装的Safari。

Answer 1

连字是联合字母或其他形状，可替代常规字母组。例如f + f + l = ffl作为一个整体。 Unicode建议在Unicode字符数据库的专用区域（PUA）中存储连字的字形（图纸）。它们从U + E000开始，具有大约6400个代码点。然后定义Glyph Substitution（GSUB）表以定义用连字替换键入字母的规则。您可以使用Microsoft的Volt程序来执行此操作。

字体中的脚本是什么？ OpenType兼容字体（现在是ISO OpenFont）可以有一个或多个脚本。这样的脚本是拉丁语，由英语和西欧语言使用。俄语和东欧语言使用西里尔语。有两种连字：标准和自由裁量。任何脚本都可以具有STANDARD Ligatures。最重要的是，OpenType标准规定应用程序应默认显示STANDARD LIGATURES 。除Internet Explorer之外的所有浏览器都符合此规范。

Internet Explorer 10似乎需要特殊的CSS指令才能启用连字显示： font-feature-settings：'liga'1; ＆lt; - 注意'1'。这意味着'开'。相同的语法适用于'dlig'等。微软似乎不理解他们编写的标准。 'liga'1应该是默认值，不需要指定。使用'liga'0强制程序跳过连字显示。

早期（2006年），SVG-CSS3属性'text-rendering：geometricPrecision（或OptimizeLegibility'用于使浏览器显示连字。现在没有必要显示标准连字，与字体标准一致

标准结扎有助于恢复残缺的印度教徒。查看使用几乎所有连字的字体编写的网页（这实际上是罗马化的Singhala。将文本复制到记事本以验证）： A Singhala blog
计算机和智能手机上的所有现代浏览器都显示此页面，除了版本10之前的IE。其他浏览器显示没有任何CSS的标准连字。 IE 10需要字体功能设置规则。

Answer 2

我实际上发现了一些关于此的文档有点不清楚，这就是导致差距的原因。

这里的重要思想是让Element使用正确配置的font-face。这是正确运行的.nav修订声明（使用无前缀添加适当的前缀）...

（请注意，我移动了stylesheets目录下的fonts目录以获得更简单的路径）

@font-face {
 font-family: 'Live-Share-UI';
 src: url("fonts/Live-Share-UI.eot");
 src: url("fonts/Live-Share-UI.eot?#iefix") format("embedded-opentype"), url("fonts/Live-Share-UI.woff") format("woff"), url("fonts/Live-Share-UI.ttf") format("truetype"), url("fonts/Live-Share-UI.svg#Live-Share-UI") format("svg");
 font-weight: normal;
 font-style: normal; }

还有更多的描述性工作添加到字体中以使其更紧凑，这直接来自icomoon。

.nav, .header {
  font-family: Live-Share-UI;
  font-feature-settings: "liga","dlig";
  text-rendering: optimizeLegibility;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-smoothing: antialiased;
  position: fixed;
  text-align: center;
  z-index: 50;
  margin: auto auto 1em auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em; }

作为最后一点，我实际上是在SASS中使用这些原始代码：

@mixin ui () { 
  font-family: Live-Share-UI;
  font-feature-settings:"liga","dlig";
  text-rendering:optimizeLegibility;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased; 
}

.nav, .header{ 
  @include ui();
  position: fixed;
  text-align: center;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto auto 1em auto; 
  right: 0;
  height: 1.5em; }

因此，简而言之：将dlig 1应用于元素，而不是字体。

IE10中的连字符（和字体）

2 个答案: