使用font-face和本地文件加载'Segoe UI'字体

Question

使用font-face和本地文件加载'Segoe UI'字体

cssfontsembedfont-facetypography

21

如果用户的计算机安装了"Segoe UI"字体，我希望在网站中使用它。

我已经声明了所有样式，并使用@font-face来使用font-weight属性改变字体厚度（这是一个非常酷的功能！）。

问题是我不能让Segoe UI Bold正常工作（我认为名字是错的）。有什么想法吗？

这里有一个例子。 (4)和(5)应该是一样的：http://jsfiddle.net/kxHQR/1/

@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 700;
  src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 400;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 300;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}

/* ... */

BODY {
 font-family: 'Myname';    
}

.boldtext {
    font-family:'Segoe UI';
    font-weight:700;
}

<p style='font-weight:300'>1. Text with font-weight:300. OK</h1>
<p>2. Here is normal text. OK</p>
<p style='font-weight:600'>3. Text with font-weight:600.  OK</p> 
<p style='font-weight:700' >4. Text with font-weight:700. It must be like (5), but it is like (3). :(</p>
<p class='boldtext'>5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; </p>

- DanielBlazquez

就此而言，“Segoe UI Bold”是我Windows字体目录中列出的名称。 - Tim M.

它在我的机器上在Chrome，FF和IE9上运行：http://jsfiddle.net/kxHQR/。请注意，您需要使用旧的IE语法和自定义字体来支持IE8及以下版本。 - Tim M.

1

它应该正常工作：http://jsfiddle.net/UcTGP/ 你是否缺少字体文件？你使用的是什么系统或浏览器？ - Renaat De Muynck

在您的系统上测试<b style="font-family: Segoe UI">Sample</b>（不使用任何@font-face），或尝试在文字处理器中使用Segoe UI Bold。这似乎是因为您的系统缺少或损坏了该字体。由于在我的系统上，font-family: Segoe UI Bold无法显示它（但这种旧方法适用于Semibold和Light），而我的字体列表工具（对于IE）http://www.cs.tut.fi/~jkorpela/listfonts1.html没有列出Segoe UI Bold，所以该字体可能存在一些奇怪的问题。 - Jukka K. Korpela

1

刚发现了同样的问题。已经发布了一些错误：issue 139857，issue 124504。 - Renaat De Muynck

显示剩余2条评论

3个回答

9

尽管这种基本方法很合理，但浏览器似乎在处理字体数据时存在困难，可能是因为它们对字体数据的不同处理方式所致。似乎以下是使用不同 Segoe UI 字重最有效的方法：

对于轻型，请使用 font-family: Segoe UI Light
对于常规，请只使用 font-family: Segoe UI
对于半粗体，请使用 font-family: Segoe UI Semibold
对于粗体，请使用 font-family: Segoe UI; font-weight: bold

这很混乱和不合逻辑，但在 Firefox、Chrome、IE、Opera、Safari 上都能正常工作（在 Win 7 上测试）。

在网页上，最好尝试找到一个合适的免费字体，并通过 @font-face 使用不同的字重。毕竟，Segoe UI 远非通用字体，也没有简单的方法为其设置适当的备选方案。

- Jukka K. Korpela

1

我还注意到，如果硬件渲染关闭（gfx.direct2d.disabled;true），Firefox不使用Segoe UI的轻样式，而是使用默认的Segoe UI（普通重量）样式。如果启用了硬件渲染，则可以正常工作。 - Ray

@PacMani，你在火狐17（Win 7）中的观察结果无法再现：更改该设置并重新启动浏览器不会影响行为，font-family：Segoe UI Light仍然有效。 - Jukka K. Korpela

K.Korpela：你说得对，我自己也无法再现这个问题了。我想我最后一次看到它时使用的是Firefox 15。 - Ray

在Windows 7上的Firefox 16-18和Windows 8上的FF18中，对于我来说“font-family: Segoe UI Light”无法正常工作。 - pilau

@pilau，我刚在Windows 7上的Firefox 18.0.2上重新测试了一下，我得到了Segoe UI Light字体。你是否检查过你的计算机中是否缺少或损坏了Segoe UI Light字体？（例如，在文字处理器中或其他网络浏览器中是否可以正常使用？） - Jukka K. Korpela

@JukkaK.Korpela 这对我有效：font-family: Segoe UI; font-weight: lighter; 在两台不同的电脑上（Win7和8），都是FF18。顺便说一下，font-weight: 200;也可以使用。 - pilau

6

@font-face {
    font-family: 'Segoe UI';
    src: url('./ui/segoeui.eot');
    src: local("Segoe UI"),
         local("Segoe"),
         local("Segoe WP"),
         url('./ui/segoeui.eot?#iefix') format('embedded-opentype'),
         url('./ui/segoeui.woff') format('woff'),
         url('./ui/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/semibold/seguisb.eot');
    src: local("Segoe Semibold"),
         local("Segoe WP Semibold"), 
         url('/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/semibold/seguisb.woff') format('woff'),
         url('/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/bold/segoeuib.eot');
    src: local("Segoe Bold"),
         local("Segoe WP Bold"),
         url('/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/bold/segoeuib.woff') format('woff'),
         url('/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/light/segoeuil.eot');
    src: local("Segoe UI Light"),
         local("Segoe WP Light"),
         url('/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/light/segoeuil.woff') format('woff'),
         url('/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Download:

https://github.com/KingRider/frontcom/tree/master/css/fonts

- KingRider

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pilau · Accepted Answer

这是来自微软自己的Windows 8（Metro）应用程序的样式表：

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

以上方法对我有用，也是Open Sans和Google字体使用的方法。然而，这与Paul Irish最初提出的方法完全相反：

@font-face {
    font-family: 'ChunkFiveRegular;
    src: url('whatever source');
    font-weight: normal;
    font-style: normal;
}

Paul Irish的方法允许（即需要）在CSS中稍后设置字重和斜体，但结果是“伪造的”：由于浏览器没有所有字体系列中的字体，它必须自行计算字符的字重和形状来弥补这一点。 Paul方法的单一且有限的优势在于它可能会在所有浏览器中重置字体 - 但这确实取决于使用的字体 - 因为所有浏览器都以不同方式呈现字体！

我更喜欢微软的方法，因为它允许指定所需的font-style和font-weight，并且浏览器将显示正确的字体文件，而不是计算伪大小、粗体和斜体。但是，它需要您为使用的字体系列中的每个字体变化提供一个字体文件。

最终所有问题都归结于您将要使用的字体及其如何使用（不同的字重、斜体等）。无论您选择哪种方法，我基于自己的经验建议（并且Paul也建议）使用FontSquirrel的font-face生成器来处理您的所有网络排版事宜。FontSquirrel可以通过省略不必要的字符集、压缩字体等方式显著减小字体大小。