How to render Segoe UI font in different navigators and OS's

问题

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?

回答1:

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/

回答2:

Use CSS to specify a location where the font can be downloaded if it is not available in the OS. Add this to the start of your CSS file:

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.ttf');
}

The ttf format works for most browsers. For IE, add the location of an eot version to your conditional IE stylesheet:

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.eot');
}

回答3:

Our users facing the same issue with Segoe. Solution is to remove the font foreign language in TTF Names using Fontforge

http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

来源：https://stackoverflow.com/questions/14399484/how-to-render-segoe-ui-font-in-different-navigators-and-oss

标签

css

layout

font-face

webfonts