CSS 在网页中嵌入字体

Question

提问by CruelIO

Ive googled alot trying to figure out how to embed fonts on a webpage. As i understand it you should upload the fonts to your webpage in .ttf and .eot formats. and the use @font-face in a stylesheet.

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

I have placed the Kingthings_Italique.eot and Kingthings_Italique.ttf in the root of my webpage.

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

Createt a stylesheet like this.

创建一个这样的样式表。

.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');
    }
}

First i refer to it like this

首先我是这样称呼它的

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

And the i try to use it like this

我尝试像这样使用它

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

But no matter if i use ie8 or chrome2 the font isnt changed.

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

If I understand http://randsco.com/?p=680&more=1&c=1correct it should be possible

如果我理解http://randsco.com/?p=680&more=1&c=1正确应该是可能的

If I open the source in ie8 should I then be able to see the font name? because if I search for king through the ie8 code i find nothing

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

Answer 1

回答by Joseph Weissman

In order for the embedded font feature to work (in browsers supporting it) you've also got to apply the new font-family to a style selector.

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

For instance

例如

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

won't do the trick, even though it will indeed load a font (if it's a valid URL) -- because all we've doneis load the font. We still need to actually apply it, so

即使它确实会加载字体（如果它是有效的 URL），也不会成功——因为我们所做的只是加载字体。我们仍然需要实际应用它，所以

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

h1 {
  font-family: CustomFont;
}

both loads the custom font and applies it to your CSS selector (in this example, h1).

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

You'll almost certainly want to read a tutorial about @font-face (Krule has already suggested a good one above with links to free fonts which can be used with it.) Ditto to all the warnings above about graceful degeneration, as this is still not a universally supported feature.

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

Answer 2

回答by AAA

This isn't really something you can, or should do. The majority of the web has settled on some basic fonts (serif, sans-serif etc) and it is then up to the browser to decide. You can specify multiple fonts and have the browser downgrade if it isn't available:

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

font-family: Kingthings Italique, sans-serif

This is probably the best strategy, if people have the font it will display, otherwise it will become a generic font.

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

Answer 3

回答by Krule

Although using @font-face is still not recommended due to lack of widespread support, there is a way to use custom fonts in modern browsers (most of them). However don't forget to provide backup solution for graceful degradation in older browsers.

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

Anyway, you should check this tutorialfor more details.

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

Answer 4

回答by Sergey Kovalev

First of all, try to use absolute paths:

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

url('/Kingthings_Italique.ttf')

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

Answer 5

回答by Guss

Font embedding using CSS is not supposed to work in modern web browsers. More precisely, font embedding using CSS was part of CSS2 and was supported by some browsers, but retracted in CSS2.1 (and actually also removed from the CSS2 current specification).

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

Expect a comeback of font support with CSS3 when browsers start supporting that. Firefox 3.5, Opera 10 and Safari are expected to support CSS3 style font-embedding using TTF fonts, Chrome does not feature Safari's support for CSS3 font embedding for some reason.

当浏览器开始支持 CSS3 时，期待字体支持的卷土重来。Firefox 3.5、Opera 10 和 Safari 预计将支持使用 TTF 字体的 CSS3 样式字体嵌入，Chrome 出于某种原因不支持 Safari 对 CSS3 字体嵌入的支持。

Your problem in rendering your font on IE8 may be related to the fact that the second font-face declaration defines the same font-family as the first - and thus overrides it - but does not declare any eot fonts that IE can use.

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

I suggest you use a single font-face definition such as;

我建议您使用单个字体定义，例如；

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

Then IE can try to use the eot font first. Other browsers (but not Chrome apparently) will try to use the eot, then fall back to the ttf rendering. This of course assumes that IE can handle the "alternative sources" definition, which I'm not sure it does - the @font-face documentation in MSDNdoes not make a reference to that.

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

Answer 6

回答by J?rn Schou-Rode

AFAIK, font embedding using pure CSS is not really supported by most browsers (yet).

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

Other solutions exists, though. If you don't mind using javascript, check out cufon, which uses SVG/VML to render whatever font in most web browsers used today (even IE6).

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

Answer 7

回答by Michas

I think You should have only one @font-face declaration with many sources for one font-family. It looks IE doesn't like your declaration. The code from mentioned article ( http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding):

我认为您应该只有一个 @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;  
}

The first source should be for EOT file. The second source should be for TTF file and start with local font name. It is some kind of hack. The second source attribute looks invalid for IE so this browser use the first. For other browsers both are valid, however only the last is used.

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

For converting TTF files to EOT I used this small programme: http://code.google.com/p/ttf2eot/

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

The method should be supported by following browsers:

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

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

火狐 3.6 +
浏览器 4 +
歌剧 10.00 +
铬 4.0 +
Safari 3.1 +

I have done some test and it have been working for me. The Chrome 2 is probably too old.

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

Answer 8

回答by Chev

You will need to blocks to support embedded fonts in both IE and non-IE browsers.

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

The IE block will need to come second and be contained within an IE selector comment.

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

For example:

例如：

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

This will work for all modern browsers except IE (firefox, safari, chrome, etc...) Now to get IE to behave you will need the following:

这适用于除 IE 之外的所有现代浏览器（firefox、safari、chrome 等...）现在要让 IE 正常运行，您需要以下内容：

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

The comment if statement is only read by IE since IE 5 and on. This is great for giving IE special instructions. To the other browsers it's just some commented out text that does not get rendered.

自 IE 5 起，注释 if 语句只能由 IE 读取。这非常适合给 IE 特殊说明。对于其他浏览器，它只是一些未呈现的注释文本。

If you do not have a .eot format of your .ttf font then you can go to the following url http://www.kirsle.net/wizards/ttf2eot.cgiIt's really easy to use and generates the .eot font for you in seconds.

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

+1 if you like my answer. Comment if you think I need to improve something :)

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

Answer 9

回答by Matt W-D

I recognize this question is rather old, but there is now a great font API from google that one can <link>to: https://developers.google.com/webfonts/

我承认这个问题很老，但现在谷歌提供了一个很棒的字体 API，可以<link>：https: //developers.google.com/webfonts/

CSS 在网页中嵌入字体

提问by CruelIO

回答by Joseph Weissman

回答by AAA

回答by Krule

回答by Sergey Kovalev

回答by Guss

回答by J?rn Schou-Rode

回答by Michas

回答by Chev

回答by Matt W-D

相关推荐

最近更新

标签

CSS 在网页中嵌入字体

提问by CruelIO

回答by Joseph Weissman

回答by AAA

回答by Krule

回答by Sergey Kovalev

回答by Guss

回答by J?rn Schou-Rode

回答by Michas

回答by Chev

回答by Matt W-D

相关推荐

CSS 使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误？

在 CSS 中制作锯齿状三角形边框

CSS 打印样式表，一页打印并切断剩余的文本

CSS 什么是指南针，什么是 sass ......它们有什么不同？

相关推荐

最近更新

标签