logo标签列表

如何在不同的浏览器和操作系统中呈现Segoe UI字体

csslayoutfont-facewebfonts
3
我有一些遵循微软Metro风格（例如：新的Outlook）的Web应用程序。但是我使用的字体出现了问题。默认字体是“Segoe”系列，当用户在具有桌面字体Segoe UI的系统中进入应用程序时，一切都正常。但在某些情况下，用户使用Mac或Ubuntu等不带有“Segoe UI”的系统，导航器使用次要字体（在我的情况下是Tahoma）。
在新的Outlook中，无论您使用什么操作系统，它始终使用Segoe UI系列字体（我认为他们正在使用网络字体）。
有人建议我使用网络字体，但我在许多网络字体网站上都没有找到Segoe系列的网络字体。
有人有任何想法如何解决这种情况吗？
难道这不是拥有第二字体的意义吗？当主要字体不可用时定义一个字体？你为什么会感到惊讶呢？ - cimmanon
因为要求始终使用Segoe UI，遵循Metro样式指南，例如新的Outlook、TFS 2012等... - Renan Cunha
3个回答
9
首先，每个浏览器都有不同类型的字体。为了确保在每个浏览器中都能正常工作，您需要至少放置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

eot - 用于：Internet Explorer < 9

svg - 用于：Safari Mobile（iOS < 4.2的iPhone、iPad）和Android浏览器

woff - 用于：Internet Explorer >= 9、FireFox >= 3.6、Chrome >= 6

Segoe.eot - 和其他一些链接（在这种情况下是相对链接）指向那些字体文件。

编辑

因为fontsquirrel.com无法渲染某些字体，而fontface.codeandmore.com有时会变成商业字体，您将不得不搜索其他一些在线字体生成器。

编辑

如果fontsquirrel.com无法帮助您，请尝试使用：http://www.font2web.com/

1
请注意，如果您想在网页中使用Segoe UI字体，您需要购买许可证。 - robertc
是的，但这取决于字体许可证，我只是想展示如何解决网络字体集问题。顺便说一下，fontsquirrel.com 允许您使用许多免费字体。 - bumerang
1

使用CSS指定一个位置，如果操作系统中没有可用的字体，则可以从该位置下载字体。将此添加到CSS文件的开头：

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

ttf格式适用于大多数浏览器。对于IE，将eot版本的位置添加到您的条件IE样式表中：

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.eot');
}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接