7

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

4

9 回答 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 已经在上面推荐了一个很好的教程，其中包含可以与它一起使用的免费字体的链接。）同上上面关于优雅退化的所有警告，因为这是仍然不是普遍支持的功能。

于 2009-09-23T00:13:04.080 回答
1

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

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

于 2009-09-05T13:23:55.893 回答
1

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

font-family: Kingthings Italique, sans-serif

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

于 2009-09-05T09:42:57.977 回答
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]-->

从 IE 5 开始，只有 IE 才能读取 if 语句的注释。这非常适合给 IE 特殊指令。对于其他浏览器来说，它只是一些没有被渲染的注释掉的文本。

如果您的 .ttf 字体没有 .eot 格式，那么您可以访问以下网址 http://www.kirsle.net/wizards/ttf2eot.cgi 它非常易于使用并为您生成 .eot 字体片刻之间。

+1如果你喜欢我的回答。如果您认为我需要改进，请发表评论:)

于 2010-11-17T17:33:50.437 回答
0

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

url('/Kingthings_Italique.ttf')

<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />
于 2009-09-05T16:30:04.983 回答
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/

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

  • 火狐 3.6 +
  • 互联网浏览器 4 +
  • 歌剧 10.00 +
  • 铬 4.0 +
  • Safari 3.1 +

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

于 2010-02-12T21:12:05.187 回答
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-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 文档没有对此进行引用。

于 2009-09-05T10:23:55.517 回答
0

AFAIK，大多数浏览器（目前）并不真正支持使用纯 CSS 的字体嵌入。

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

于 2009-09-05T09:42:10.013 回答
0

我认识到这个问题已经相当老了，但现在有一个来自谷歌的很棒的字体 API，可以<link>：https ://developers.google.com/webfonts/

于 2012-07-29T05:42:20.603 回答