logo标签列表

在网页中嵌入字体

asp.netcssfontsfont-face
7

我已经搜索了很多，试图找出如何在网页上嵌入字体的方法。据我所知，您应该以.tff和.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代码中搜索king，我什么也找不到。

9个回答
10

为使嵌入式字体功能正常工作（在支持此功能的浏览器中），您还需要将新的字体族应用于样式选择器。

例如

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已经在上面建议了一个好的教程，其中包含可以与之一起使用的免费字体链接）。与上面所有有关优雅降级的警告一样，因为这仍然不是普遍支持的功能。

如何使用上述方法来使用阿拉伯字体？ - Jitendra Pancholi
1

这并不是你可以或应该做的事情。大多数网站都采用了一些基本字体（衬线字体、无衬线字体等），然后由浏览器决定。你可以指定多个字体，如果某个字体不可用，浏览器会降级：

font-family: Kingthings Italique, sans-serif

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

1
1

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

无论如何，您应该查看此教程以获取更多详细信息。

0

使用CSS进行字体嵌入在现代Web浏览器中不应该起作用。更准确地说，使用CSS进行字体嵌入是CSS2的一部分，并且受到某些浏览器的支持，但在CSS2.1中被撤回（实际上也从CSS2当前规范中删除）。

随着浏览器开始支持CSS3，预计会有字体支持的回归。Firefox 3.5、Opera 10和Safari预计将支持使用TTF字体的CSS3样式字体嵌入，但Chrome由于某种原因没有Safari对CSS3字体嵌入的支持。

您在IE8上呈现字体的问题可能与第二个font-face声明定义了与第一个相同的字体系列有关 - 因此覆盖了它 - 但没有声明IE可以使用的任何eot字体。

我建议您使用单个font-face定义，例如;

@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可以处理“替代来源”定义，我不确定它是否可以 - MSDN中的@font-face文档没有提到这一点。

0

首先，尽量使用绝对路径：

url('/Kingthings_Italique.ttf')

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

我认为你应该只有一个@font-face声明，但是可以为一个字体系列提供多个来源。看起来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可能太旧了。

这不起作用。请查看我的答案，了解一种更准确的方法，可以同时嵌入IE和非IE浏览器的字体。 - Chev
0

您需要使用两个代码块来支持嵌入式字体在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 提供特殊指令非常有用。对于其他浏览器来说，它只是一些被注释掉的文本，不会被渲染。

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

如果您喜欢我的回答，请点赞。如果您认为我需要改进一些内容，请评论 :)

0
据我所知，大多数浏览器（目前）并不真正支持使用纯CSS进行字体嵌入。
但是还有其他解决方案。如果您不介意使用JavaScript，请查看cufon，它使用SVG/VML在今天大多数使用的Web浏览器中呈现任何字体（甚至IE6）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接