我用谷歌搜索了很多试图弄清楚如何在网页上嵌入字体。 据我所知,您应该以.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代码搜索国王我找不到任何东西
答案 0 :(得分:9)
为了使嵌入字体功能起作用(在支持它的浏览器中),您还必须将新的字体系列应用于样式选择器。
例如
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已经在上面提出了一个很好的教程,其中包含可以与它一起使用的免费字体的链接。)同上所有关于优雅退化的警告,因为这仍然不是普遍支持的功能。
答案 1 :(得分:1)
这不是你能做或应该做的事情。大多数网络已经确定了一些基本字体(serif,sans-serif等),然后由浏览器决定。如果不可用,您可以指定多种字体并让浏览器降级:
font-family: Kingthings Italique, sans-serif
这可能是最好的策略,如果人们有它将显示的字体,否则它将成为通用字体。
答案 2 :(得分:1)
虽然由于缺乏广泛的支持,仍然不推荐使用@ font-face,但有一种方法可以在现代浏览器中使用自定义字体(大多数)。但是,不要忘记为旧浏览器中的优雅降级提供备份解决方案。
无论如何,您应该查看this tutorial了解更多详情。
答案 3 :(得分:0)
AFAIK,大多数浏览器都不支持使用纯CSS进行字体嵌入。
但是存在其他解决方案。如果您不介意使用javascript,请查看cufon,它使用SVG / VML渲染当今使用的大多数Web浏览器中的任何字体(甚至是IE6)。
答案 4 :(得分:0)
使用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没有引用它。
答案 5 :(得分:0)
首先,尝试使用绝对路径:
url('/Kingthings_Italique.ttf')
<link href="/StyleSheet.css" rel="stylesheet" type="text/css" />
答案 6 :(得分:0)
我认为你应该只有一个@ 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/
以下浏览器应该支持该方法:
我做了一些测试,它一直在为我工作。 Chrome 2可能太旧了。
答案 7 :(得分: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 5之后被IE读取。这非常适合给予IE特别说明。对于其他浏览器,它只是一些未被渲染的注释掉的文本。
如果您的.ttf字体没有.eot格式,那么您可以转到以下网址 http://www.kirsle.net/wizards/ttf2eot.cgi 它非常易于使用,并在几秒钟内为您生成.eot字体。
+1,如果你喜欢我的答案。如果您认为我需要改进某些内容,请发表评论:)
答案 8 :(得分:0)
我认识到这个问题相当陈旧,但现在Google提供了一个很棒的字体API,可以<link>
到:https://developers.google.com/webfonts/