有没有办法在网站上添加一些自定义字体而不使用图像,Flash或其他图形？
例如,我正在一些婚礼网站上工作,我找到了很多很好的字体,但是我找不到在服务器上添加该字体的正确方法,以及如何在CSS中包含该字体进入HTML？这可能没有图形吗？
这可以通过CSS完成:
Hello world!
如果您使用TrueType字体(TTF)或Web开放字体格式(WOFF),则所有常规浏览器都支持它.
您可以通过Google Web Fonts添加一些字体.
从技术上讲,字体是在Google上托管的,您可以在HTML标题中链接它们.然后,您可以在CSS中自由使用它们@font-face(阅读它).
例如:
在该部分:
然后在CSS中:
h1 { font-family: 'Droid Sans', arial, serif; }
解决方案似乎非常可靠(甚至Smashing Magazine也将它用于文章标题.).但是,目前在Google字体目录中可用的字体并不多.
要做的就是使用@ 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-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字体.在线提供的一些工具可以进行转换.
但是如果你想以非标准格式(位图等)附加字体,我无法帮助你.
我发现在网站上使用非标准字体的最简单方法是使用sIFR
它确实涉及使用包含字体的Flash对象,但如果未安装Flash,它会很好地降级为标准文本/字体.
样式在CSS中设置,JavaScript为您的文本设置Flash替换.
编辑:(我仍然建议使用非标准字体的图像,因为sIFR会增加项目的时间并且可能需要维护).
文章字体面在IE中:使Web字体工作说,它适用于所有三种主要的浏览器.
这是我工作的一个示例:http://brendanjerwin.com/test_font.html
更多讨论在嵌入字体中.
Typeface.js和Cufon是另外两个有趣的选择.它们是JavaScript组件,可以通过除Internet Explorer之外的所有较新浏览器中的新
两者(截至目前)的主要问题是选择文本不起作用或至少非常笨拙地起作用.
不过,这对于头条新闻来说还是非常不错的.正文...我不知道.
而且速度惊人的快.
或者你可以试试sIFR.我知道它使用Flash,但仅限于可用.如果Flash不可用,它将以原始(CSS)字体显示原始文本.
京公网安备 11010802040832号 | 京ICP备19059560号-6 