4

我在 IE10 中正确显示以下代码时遇到问题。我对它无法在 IE9 中运行这一事实感到满意，但根据 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。

4

2 回答 2

3

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

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

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

早期（2006 年），SVG-CSS3 属性“text-rendering:geometricPrecision”（或 OptimizeLegibility）被用于使浏览器显示连字。现在，根据字体标准，不需要显示标准连字。

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

于 2013-10-30T13:48:25.410 回答
1

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

这里的重要想法是正确配置使用字体的元素。这是正确工作的 .nav 的修订声明（使用无前缀添加适当的前缀）...

（请注意，我将 fonts 目录移动到 stylesheets 目录下以便于路径）

@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 应用于元素，而不是字体。

于 2013-06-01T00:42:11.157 回答