如何在不同的导航器和操作系统中渲染Segoe UI字体 [英] How to render Segoe UI font in different navigators and OS's

问题描述

我有一些遵循微软地铁风格的网络应用程序（ie：new outlook）。
但是我使用的字体有麻烦。
默认字体是Segoe系列，当用户在具有桌面字体Segoe UI的系统中输入应用程序时，一切正常。但在某些情况下，用户使用的Mac或Ubuntu不带有Segoe UI，导航器使用的是secundary字体（在我的情况下，Tahoma）。

在新的Outlook中，无论你使用什么操作系统，它总是使用Segoe UI家庭（我认为他们使用网络字体）

有些人说我使用网络字体，但我没有发现在任何地方（我在很多网络字体网站搜索）Segoe家庭的网络字体。

有人有任何想法我解决了这种情况？

解决方案

首先，每种浏览器都有不同类型的字体。确保它将在每个浏览器中工作您需要至少放置3种类型：eot，ttf，woff（和svg）。获得这些的最佳方法是使用以下链接之一： http://www.fontsquirrel.com/fontface / generator ， http://fontface.codeandmore.com/

这很简单，你会得到一套准备使用的字体。下载后您将会看到示例文件，您将在其中看到如何使用您的新字体。

在您的情况下，它可以像：

  @ font-face {
 font-family：'Segoe'; 
 src：url（'/ font_path / Segoe.eot'）; 
 src：url（'/ font_path / Segoe.eot？#iefix'）format（'embedded-opentype'），
 url（'/ font_path / Segoe.woff'）format（'woff'） ，
 url（'/ font_path / Segoe.ttf'）format（'truetype'），
 url（'/ font_path / Segoe.svg＃Segoe'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  

/ font_path / 是根据此css文件的您的字体的相对路径。通常是 ../ fonts / 。

为什么你需要这些？

ttf，otf - 适用于：FireFox，Chrome< 6，Safari和Opera

oet - for：Internet Explorer< 9

svg - 适用于：Safari Mobile（iPhone，iPad for iOS< 4.2），Android浏览器

woff - for：Internet Explorer> = 9，FireFox> = 3.6，Chrome> = 6

Segoe.eot

$ b b

因为 fontsquirrel.com 不呈现某些字体，并且 fontface.codeandmore.com 已更改为商业有时您将需要google一些其他在线字体生成器。

EDIT

如果 fontsquirrel.com 不会帮助您尝试使用： http： /www.font2web.com /

I have some web applications that follow metro style of the Microsoft (ie.: new outlook). But I'm having troubles with the fonts that I used. The default font is "Segoe" family, when an user enter in the application in a system that have the desktop font Segoe UI, everything is alright. But in some cases users are using Mac or Ubuntu that don't come with the "Segoe UI" and the navigator uses the secundary font (in my case, Tahoma).

In the new Outlook don't matter what OS you are using, it always uses Segoe UI family (I think that they are using web fonts)

Some people spoke to me use web fonts, but I didn't find in nowhere (I searched in alot of web fonts sites) web fonts of Segoe family.

Does someone have any idea how I solve this situation?

解决方案

First of all there are difrent types of fonts for every browser. To make sure that it will work in every browser You need to put at least 3 types: eot, ttf, woff (and svg). The best way to get those is to use one of the links: http://www.fontsquirrel.com/fontface/generator, http://fontface.codeandmore.com/

It's very simple and You will get a set of ready to use fonts. After downloading Your set You will find the example file where You will see how to use Your new fonts.

In Your case it can be like:

@font-face {
    font-family: 'Segoe';
    src: url('/font_path/Segoe.eot');
    src: url('/font_path/Segoe.eot?#iefix') format('embedded-opentype'),
         url('/font_path/Segoe.woff') format('woff'),
         url('/font_path/Segoe.ttf') format('truetype'),
         url('/font_path/Segoe.svg#Segoe') format('svg');
    font-weight: normal;
    font-style: normal;
}

/font_path/ is the relative path to your fonts according to this css file. Usually it's ../fonts/.

Why You need all those?

ttf, otf - for: FireFox, Chrome < 6, Safari and Opera

oet - for: Internet Explorer < 9

svg - for: Safari Mobile (iPhone, iPad for iOS < 4.2), Android browser

woff - for: Internet Explorer >= 9, FireFox >= 3.6, Chrome >= 6

Segoe.eot - and others are links (relative in this case) to those font files.

EDIT

Because fontsquirrel.com don't render some fonts, andfontface.codeandmore.com have changed to commercial sometimes You will have to google for some other online font generator.

EDIT

If fontsquirrel.com won't help You try to use: http://www.font2web.com/

这篇关于如何在不同的导航器和操作系统中渲染Segoe UI字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！