'Segoe UI'字体,带有font-face和local

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

这是来自Microsoft自己的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中设置权重和斜体,但结果是"虚假":由于浏览器没有家族中的所有字体,因此必须计算其重量和形状.字符本身就可以弥补这一点.保罗方法的单一且有限的优势在于它可能会在所有浏览器中重置字体 - 但它确实取决于使用的字体 - 因为所有浏览器都以不同的方式呈现字体!

我更喜欢微软的方法,因为它允许指定你需要的font-styles和font-weights,浏览器将显示正确的字体文件,而不是计算虚假尺寸,粗体和斜体.但是,它确实要求您为要使用的族中的每个字体变体提供字体文件.

最后,它归结为你将使用什么字体以及如何使用它(不同的权重,斜体等).无论您采用何种方法,我都建议您根据自己的经验(以及Paul也建议)使用FontSquirrel的字体生成器进行所有的Web排版工作.FontSquirrel可以通过省略不必要的字符集,压缩字体等来显着减小字体大小.

Answer 2

虽然基本方法是合乎逻辑的,但浏览器似乎有困难,显然是由于它们对字体数据的不同处理造成的.以下似乎是使用不同权重的Segoe UI的最有效方法:

1. 对于光,使用 font-family: Segoe UI Light
2. 对于常规,使用只是 font-family: Segoe UI
3. 对于半纤维,使用 font-family: Segoe UI Semibold
4. 大胆,使用 font-family: Segoe UI; font-weight: bold

这是杂乱和不合逻辑的,但它适用于Firefox,Chrome,IE,Opera,Safari(在Win 7上测试).

在网页上,最好尝试找到具有不同权重的合适免费字体并通过它使用@font-face.毕竟,Segoe UI远非普及,并且没有简单的方法来为它设置合适的后备.

Answer 3

@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;
}

下载:

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