css - 'Segoe UI' 字体与字体和本地

Question

如果用户的计算机上安装了“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> 

Answer 1

这个来自微软自己的stylesheet for Windows 8 (Metro) apps :

/*
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 字体 使用的方法。然而，它与 this 正好相反。方法，最初来自 Paul Irish:

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

Paul Irish 的方法允许(读作:要求)稍后在 CSS 中设置粗细和斜体，但结果是“虚假的”:由于浏览器没有家族中的所有字体，它必须计算粗细和斜体 Angular 色本身的形状来弥补这一点。 Paul 方法的单一且有限的优势在于它可能在所有浏览器中重置字体 - 但它确实取决于所使用的字体 - 因为所有浏览器呈现的字体都不同!

我更喜欢微软的方法，因为它允许指定你需要的font-style和font-weight，浏览器会显示正确的字体文件，而不是计算人造尺寸、粗体和斜体。但是，它确实要求您为将要使用的系列中的每个字体变体提供一个字体文件。

最后，一切都归结为您要使用的字体以及使用方式(不同粗细、斜体等)。无论您采用哪种方法，我都建议根据我自己的经验(以及 Paul recommends 也是)使用 FontSquirrel's font-face generator为您所有的网页排版工作。 FontSquirrel 可以通过删除不必要的字符集、压缩字体等方式显着减小字体大小。