CSS 带有字体和本地的“Segoe UI”字体

'Segoe UI' font with font-face & local

提问by DanielBlazquez

I want to use the "Segoe UI" font in a website if it is installed in the user's computer.

如果用户计算机上安装了“Segoe UI”字体，我想在网站中使用它。

I have declared all the styles with @font-facein order to use the font-weightproperty to change the thickness of the font (it's a really cool feature!).

我已经声明了所有样式，@font-face以便使用该font-weight属性来更改字体的粗细（这是一个非常酷的功能！）。

The problem is that I cannot do it work with Segoe UI Bold(I think the name is wrong). Any idea?

问题是我无法使用Segoe UI Bold（我认为名称错误）。任何的想法？

Here an example. (4) and (5) would be the same: http://jsfiddle.net/kxHQR/1/

这里有一个例子。(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> 

回答by pilau

This is from Microsoft's own stylesheet for Windows 8 (Metro) apps:

这是来自 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");
}

The above approach works for me and is also the approach used by Open Sansand Google fonts. However, it is the exact opposite of thisapproach, originally from Paul Irish:

上述方法对我有用，也是Open Sans和Google fonts使用的方法。然而，它与这种方法完全相反，最初来自 Paul Irish：

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

Paul Irish's approach allows (read: requires) setting weights and italics later in the CSS, but the result is "faux": Since the browser doesn't have all the fonts in the family, it has to calculate the weight and shape of the characters on its own to make up for that. The single, and limited strength in Paul's approach is that it mightreset the font across all browsers - but it does depend on the font in use - because all browsers render fonts differently!

Paul Irish 的方法允许（阅读：需要）稍后在 CSS 中设置权重和斜体，但结果是“假的”：由于浏览器没有家族中的所有字体，它必须计算权重和形状字符本身来弥补这一点。Paul 方法的唯一且有限的优势在于它可能会在所有浏览器中重置字体 - 但它确实取决于使用的字体 - 因为所有浏览器呈现的字体都不一样！

I like Microsoft's approach better, because it allows to specify the font-styles and font-weights you need, and the browser will display the correct font file, instead of computing faux sizes, bold and italics. However, it does require you to provide a font file for every font variation in the family you'll be using.

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

In the end it all comes down to what font you'll be using and how you use it (different weights, italics, etc). Regardless of what approach you go for, I recommend out of my own experience (and Paul recommendstoo) to use FontSquirrel's font-face generatorfor all your web typography endeavors. FontSquirrel can significantly reduce font sizes, by leaving out unnecessary character sets, compressing the fonts, and so on.

最后，一切都取决于您将使用什么字体以及如何使用它（不同的粗细、斜体等）。无论您采用哪种方法，我都建议根据我自己的经验（Paul 也推荐）将FontSquirrel 的字体生成器用于您所有的 Web 排版工作。FontSquirrel 可以通过省略不必要的字符集、压缩字体等来显着减小字体大小。

回答by Jukka K. Korpela

Although the basic approach is logical, browsers seem to have difficulties with it, apparently caused by their different processing of font data. It seems that the following is the most effective way of using different weights of Segoe UI:

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

1. for light, use font-family: Segoe UI Light
2. for regular, use just font-family: Segoe UI
3. for semibold, use use font-family: Segoe UI Semibold
4. for bold, use font-family: Segoe UI; font-weight: bold

1. 对于光，使用 font-family: Segoe UI Light
2. 对于常规，仅使用 font-family: Segoe UI
3. 对于半粗体，使用 use font-family: Segoe UI Semibold
4. 为粗体，使用 font-family: Segoe UI; font-weight: bold

This is messy and illogical, but it works on Firefox, Chrome, IE, Opera, Safari (tested on Win 7).

这是混乱和不合逻辑的，但它适用于 Firefox、Chrome、IE、Opera、Safari（在 Win 7 上测试）。

On web pages, it is probably better to try and find a suitable free font with different weights and use it via @font-face. After all, Segoe UI is far from universal, and there is no simple way to set up suitable fallbacks for it.

在网页上，最好尝试找到具有不同权重的合适的免费字体并通过@font-face. 毕竟，Segoe UI 远非通用，也没有简单的方法可以为其设置合适的回退。

回答by KingRider

@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

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