'Segoe UI'font-font&本地 [英] 'Segoe UI' font with font-face & local

问题描述

我想在网站中使用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：'My name'; 
 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。带字体重量的文本：300。 OK< / h1> 
< p> 2。这里是正常的文本。 OK< / p> 
< p style ='font-weight：600'> 3。带字体重量的文本：600。 OK< / p> 
< p style ='font-weight：700'> 4。带字体重量的文本：700。它必须像（5），但它是（3）。 ：（< / p> 
< p class ='boldtext'> 5）带有font-family的文本：'Segoe UI'（无字体面）和font-weight：700;< ; 
  

解决方案

这是Microsoft自己的适用于Windows 8（Metro）应用程序的样式表：

  / * 
明确定义Segoe UI font-family，以便我们可以分配Segoe UI 
 Semilight到合适的字体重量
 * / 
 @ 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）;上述方法适用于我，也是所使用的方法。     开放Sans 和 Google字体。但是，这与这个方法完全相反，最初来自Paul Irish：
  @ font-face {
 font-family：'ChunkFiveRegular; 
 src：url（'whatever source'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  
 
 
保罗爱尔兰的方法允许（读取：要求）设置权重和斜体CSS，但结果是faux：由于浏览器没有家庭中的所有字体，它必须自己计算字符的权重和形状，以弥补这一点。保罗的方法的单一和有限的力量是，它可以重置所有浏览器的字体 - 但它取决于使用的字体 - 因为所有浏览器呈现不同的字体！
 
 
 
我喜欢微软的方法更好，因为它允许指定 font-style  s和 font-weight 您需要，并且浏览器将显示正确的字体文件，而不是计算人为大小，粗体和斜体。但是，它需要您为您将使用的家庭中的每个字体变体提供一个字体文件。
 
 
 
到底是什么字体将使用和如何使用它（不同的权重，斜体等）。无论您采用什么方法，我都会根据自己的经验推荐（和Paul 建议），以使用 FontSquirrel的字体生成器进行所有的网页排版工作。 FontSquirrel可以显着减少字体大小，通过省略不必要的字符集，压缩字体等。
 
I want to use the "Segoe UI" font in a website if it is installed in the user's computer.

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

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

Here an example. (4) and (5) would be the same: 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> 

解决方案
This is from Microsoft's own 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");
}
The above approach works for me and is also the approach used by Open Sans and Google fonts. However, it is the exact opposite of this approach, originally from 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 might reset the font across all browsers - but it does depend on the font in use - because all browsers render fonts differently!

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.

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 recommends too) to use FontSquirrel's font-face generator for all your web typography endeavors. FontSquirrel can significantly reduce font sizes, by leaving out unnecessary character sets, compressing the fonts, and so on.

                        
这篇关于'Segoe UI'font-font&amp;本地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！