han*_*ngy 485
这可以通过CSS完成:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
如果您使用TrueType字体(TTF)或Web开放字体格式(WOFF),则所有常规浏览器都支持它.
- 它不是无用的,因为它是标准的:你实现它越多,浏览器可能实现的就越多.这并不意味着你不应该找到另一种补偿方式,但使用它作为补充对我来说似乎很好. (57认同)
- 嘿伙计们,你猜怎么着？现在快到2016年了!它现在得到广泛支持!好极了!很高兴,我这个问题迟到了.哈哈. (57认同)
- Internet Explorer和Firefox都不是基于Webkit的,所以在我看来这是一个非常无用的解决方案. (13认同)
- 但Firefox 3.1确实支持@ font-face. (8认同)
- @brendanjerwin:您链接的更新版本 - http://brendanjerwin.com/development/web/2009/03/03/embedding-fonts.html (2认同)
Mic*_*ała 116
您可以通过Google Web Fonts添加一些字体.
从技术上讲,字体是在Google上托管的,您可以在HTML标题中链接它们.然后,您可以在CSS中自由使用它们@font-face(阅读它).
例如:
在该<head>部分:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
然后在CSS中:
h1 { font-family: 'Droid Sans', arial, serif; }
解决方案似乎非常可靠(甚至Smashing Magazine也将它用于文章标题.).但是,目前在Google字体目录中可用的字体并不多.
Jav*_*diz 74
要做的就是使用@ font-face CSS声明,该声明允许作者指定在线字体以在其网页上显示文本.通过允许作者提供自己的字体,@ font-face无需依赖用户在其计算机上安装的有限数量的字体.
看看下表:
如您所见,主要由于跨浏览器兼容性,您需要了解几种格式.移动设备中的场景没有太大差异.
解决方案:
1 - 完全兼容浏览器
这是现在可能获得最深层支持的方法:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - 大多数浏览器
事情正在向WOFF转移,所以你可能会逃脱:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - 仅限最新的浏览器
甚至只是WOFF.
然后你就像这样使用它:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
参考文献和进一步阅读:
这主要是您需要了解的有关实现此功能的内容.如果您想更多地研究这个主题,我将鼓励您查看以下资源.我在这里放的大部分内容都来自以下内容
- 使用Font Face(非常推荐)
- Bulletproof @ font-face语法
- 我可以使用@ font-face网络字体吗？
- 如何存档跨浏览器@ font-face支持
- 在CSS Mozilla开发者网络上@ font-face
- 非常方便的[Font Squirrel工具](https://www.fontsquirrel.com/tools/webfont-generator)可以生成全浏览器支持所需的CSS.它甚至允许您以任何一种格式上传字体,将其转换为所有其他格式,并允许您下载所有格式.在自定义字体方面,它可以节省生命. (2认同)
BiA*_*AiB 16
如果使用非标准字体,则表示标准格式的自定义字体,这是我的工作方式,它适用于我迄今为止检查过的所有浏览器:
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
所以你只需要ttf和eot字体.在线提供的一些工具可以进行转换.
但是如果你想以非标准格式(位图等)附加字体,我无法帮助你.
Mat*_*att 11
我发现在网站上使用非标准字体的最简单方法是使用sIFR
它确实涉及使用包含字体的Flash对象,但如果未安装Flash,它会很好地降级为标准文本/字体.
样式在CSS中设置,JavaScript为您的文本设置Flash替换.
编辑:(我仍然建议使用非标准字体的图像,因为sIFR会增加项目的时间并且可能需要维护).
- 多么可怕啊!我的浏览器中有闪存但闪存也是如此.在那个网站上,我的浏览器显示了一个可怕的污损页面.Flash应该保留用于大型动画或电影的内容.太多的闪光是令人讨厌和可视的,我的... (24认同)
- @ e-satisf:怎么样？就个人而言,我从未注意到使用sIFR的页面和不使用sIFR的页面之间的区别,除了细微的文本呈现差异.老实说,我认为这是一个好主意,尽管`@ font-face`在支持的地方要好得多. (2认同)
bre*_*win 10
文章字体面在IE中:使Web字体工作说,它适用于所有三种主要的浏览器.
这是我工作的一个示例:http://brendanjerwin.com/test_font.html
更多讨论在嵌入字体中.
| 归档时间： |
|
| 查看次数： |
836217 次 |
| 最近记录： |