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中设置权重和斜体，但结果是＆＃34; faux＆＃34;：由于浏览器没有所有字体在家庭中，它必须自己计算角色的重量和形状以弥补这一点。 Paul的方法中单一且有限的优势在于可能在所有浏览器中重置字体 - 但它确实依赖于使用的字体 - 因为所有浏览器都以不同的方式呈现字体！

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

最后，它归结为您将使用的字体以及您如何使用它（不同的权重，斜体等）。无论您采用何种方法，我都建议您根据自己的经验（以及Paul recommends）使用FontSquirrel's font-face generator进行所有网络排版工作。 FontSquirrel可以通过省略不必要的字符集，压缩字体等来显着减小字体大小。

Answer 2

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

for light，请使用font-family: Segoe UI Light
常规，只使用font-family: Segoe UI
对于semibold，请使用font-family: Segoe UI Semibold
表示加粗，请使用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

Answer 4

要在页面中使用Segoe UI Light，请使用此

CSS { font-family: "Segoe UI"; font-weight: lighter; }

'segoe UI'字体，字体为face＆amp;本地

4 个答案: