Question

我用谷歌搜索了很多试图弄清楚如何在网页上嵌入字体。据我所知，您应该以.ttf和.eot格式将字体上传到您的网页。并在样式表中使用@ font-face。

我已将Kingthings_Italique.eot和Kingthings_Italique.ttf放置在我的网页的根目录中。

创建一个这样的样式表。

.MyStyle
{   
    /* For IE */
    @font-face 
    {
        font-family: 'Kingthings Italique';
        src: url('Kingthings_Italique.eot');
    }

    /* For Other Browsers */
    @font-face 
    {
        font-family: 'Kingthings Italique';
        src: local('Kingthings Italique Regular'),
             local('KingthingsItalique-Regular'),
             url('Kingthings_Italique.ttf') format('truetype');
    }
}

首先我像这样引用它

<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

我试着像这样使用它

<asp:Label ID="lbl" runat="server" Font-Bold="True" 
        Font-Size="30pt" Text="TEST123" CssClass="MyStyle"></asp:Label>

但无论我使用ie8还是chrome2，字体都没有改变。

如果我理解http://randsco.com/?p=680&more=1&c=1是正确的，那么

如果我在ie8中打开源我应该能够看到字体名称吗？因为如果我通过ie8代码搜索国王我找不到任何东西

Answer 1

为了使嵌入字体功能起作用（在支持它的浏览器中），您还必须将新的字体系列应用于样式选择器。

例如

h1 { 
  @font-face {
 font-family: CustomFont;
 src: url('CustomFont.ttf');
  }
}

不会这样做，即使它确实会加载一个字体（如果它是一个有效的URL） - 因为我们所做的全部是加载字体。我们仍然需要实际应用它，所以

@font-face {
  font-family: CustomFont;
  src: url('CustomFont.ttf');
}

h1 {
  font-family: CustomFont;
}

加载自定义字体并将其应用于CSS选择器（在本例中为h1）。

你几乎肯定想要阅读关于@ font-face的教程（Krule已经在上面提出了一个很好的教程，其中包含可以与它一起使用的免费字体的链接。）同上所有关于优雅退化的警告，因为这仍然不是普遍支持的功能。

Answer 2

这不是你能做或应该做的事情。大多数网络已经确定了一些基本字体（serif，sans-serif等），然后由浏览器决定。如果不可用，您可以指定多种字体并让浏览器降级：

font-family: Kingthings Italique, sans-serif

这可能是最好的策略，如果人们有它将显示的字体，否则它将成为通用字体。

Answer 3

虽然由于缺乏广泛的支持，仍然不推荐使用@ font-face，但有一种方法可以在现代浏览器中使用自定义字体（大多数）。但是，不要忘记为旧浏览器中的优雅降级提供备份解决方案。

无论如何，您应该查看this tutorial了解更多详情。

Answer 4

AFAIK，大多数浏览器都不支持使用纯CSS进行字体嵌入。

但是存在其他解决方案。如果您不介意使用javascript，请查看cufon，它使用SVG / VML渲染当今使用的大多数Web浏览器中的任何字体（甚至是IE6）。

Answer 5

使用CSS的字体嵌入不适用于现代Web浏览器。更确切地说，使用CSS的字体嵌入是CSS2的一部分，并且得到了一些浏览器的支持，但是在CSS2.1中被收回（实际上也从CSS2当前规范中删除了）。

当浏览器开始支持CSS3时，预计CSS3会出现字体支持。 Firefox 3.5，Opera 10和Safari预计将支持使用TTF字体的CSS3样式字体嵌入，但由于某些原因，Chrome不支持Safari对CSS3字体嵌入的支持。

你在IE8上渲染字体的问题可能与第二个font-face声明定义与第一个字体相同的字体系列的事实有关 - 因此覆盖它 - 但是没有声明IE可以使用的任何eot字体

我建议您使用单个字体 - 面部定义，例如;

@font-face 
{
    font-family: 'Kingthings Italique';
    src: local('Kingthings Italique Regular'),
         local('KingthingsItalique-Regular'),
         url('Kingthings_Italique.eot'),
         url('Kingthings_Italique.ttf') format('truetype');
}

然后IE可以尝试先使用eot字体。其他浏览器（但显然不是Chrome）将尝试使用eot，然后回退到ttf渲染。这当然假设IE可以处理“替代源”定义，我不确定它是什么 - @font-face documentation in MSDN没有引用它。

Answer 6

首先，尝试使用绝对路径：

url('/Kingthings_Italique.ttf')

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />

Answer 7

我认为你应该只有一个@ font-face声明，其中包含一个font-family的许多来源。它看起来IE不喜欢你的声明。上述文章（http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding）中的代码：

@font-face {
        font-family: " your FontName ";  
        src: url( /location/of/font/FontFileName.eot ); /* IE */  
        src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  

/* THEN use like you would any other font */  
.yourFontName {
        font-family:" your FontName ", verdana, helvetica, sans-serif;  
}

第一个来源应该是EOT文件。第二个源应该是TTF文件，并以本地字体名称开头。这是某种黑客行为。第二个源属性对于IE看起来无效，因此此浏览器使用第一个。对于其他浏览器，两者都有效，但只使用最后一个。

为了将TTF文件转换为EOT，我使用了这个小程序： http://code.google.com/p/ttf2eot/

以下浏览器应该支持该方法：

Firefox 3.6 +
Internet Explorer 4 +
Opera 10.00 +
Chrome 4.0 +
Safari 3.1 +

我做了一些测试，它一直在为我工作。 Chrome 2可能太旧了。

Answer 8

您需要阻止在IE和非IE浏览器中支持嵌入字体。

IE块需要排在第二位并包含在IE选择器注释中。

例如：

<style type="text/css">
     @font-face
     {
          font-family: 'myFont';
          src: url('/location/of/myFont.ttf');
     }
</style>

这适用于所有现代浏览器，除了IE（firefox，safari，chrome等等）。现在要让IE运行起来，你将需要以下内容：

<!--[if IE]>
<style type="text/css">
     @font-face
     {
          font-family: 'myFont';
          src: url('/location/of/myFont.eot');
     }
</style>
<![endif]-->

注释if语句仅在IE 5和IE 5之后被IE读取。这非常适合给予IE特别说明。对于其他浏览器，它只是一些未被渲染的注释掉的文本。

如果您的.ttf字体没有.eot格式，那么您可以转到以下网址 http://www.kirsle.net/wizards/ttf2eot.cgi 它非常易于使用，并在几秒钟内为您生成.eot字体。

+1，如果你喜欢我的答案。如果您认为我需要改进某些内容，请发表评论：）

Answer 9

我认识到这个问题相当陈旧，但现在Google提供了一个很棒的字体API，可以<link>到：https://developers.google.com/webfonts/

在网页中嵌入字体

9 个答案: