[译]简化的 Web 字体

简介:

 设计与排版是相辅相成的。但每当我想在我的网页上使用特别的字体时,总是让人十分头痛,很难实现。因为这个原因,许多网页设计师放弃使用这种方式,通过将文字处理为背景图片来解决这个问题。但这样带来了另一些问题,包括可访问性(注:针对盲人等残障人士,例如他们需要文字朗读功能)及页面内容警惕性问题(图片不如文字那样具有可调整性),有时候有必要对页面渲染进行像素级的控制,但另外一些时候,我们希望由浏览器和用户来控制文字的排列和显示。

浏览器支持

在本文中,我主要介绍过去和现在浏览器对 Web 字体的支持情况,使用的字体类型及如何在页面标记中使用它们。
Microsoft 在 1995 年就已经在首个 Internet Explorer 版本中通过 FONT FACE 标记来支持嵌入字体,随后的 3、4、5 几个版本又增加了 CSS 支持。不过,这种技术需要用户的系统中已经安装有要使用的字体。最后,Microsoft 提供了一个 WEFT 工具,让大家可以将字体嵌入到自己的网页中,用户无需实现安装该字体就可以正确浏览该页面。
Internet Explorer 所支持的字体格式是  Embedded Open Type (EOT) 文件格式,这种格式还没有被其他浏览器支持(注:最新版本的 Chrome 浏览器已经支持)。经我测试的其它所有浏览器(包括最新版本的 Firefox、Opera 和 Safari)都支持  TrueType (TTF) 字体格式。

转换字体

在 Windows 中使用的大多数字体都是 True Type 字体。为了使我们的( 特殊)字体能在 Internet Explorer 中使用,他们必须变成 EOT 格式。
Microsoft 早前就提供了一个  Web Embedding Fonts Tool (WEFT) 工具,帮助网页开发人员生成 EOT。它具有完全图形化的界面,能够扫描并识别网站中使用该字体的所有字符,然后只把这些字符编码并打包到 EOT 字体格式中,随后就可以上传到服务器上使用了。我使用过这款软件,感觉用起来不方便不直观,而且并没有处理到我是用的字体。
除此之外,我还发现了另外一款开源的命令行工具  ttf2eot (采用 GNU GPL v2 许可),并有 Windows 版本提供下载。该工具最初为 Unix 系统而开发,因此用法上和普通的 Windows 程序不太一样,它会将字体转换为输入流,然后写入到输出流中,也就是说,需要在 Windows 命令提示符中运行类似下方的命令:
TTF2EOT < MyFont.ttf > MyFont.eot

使用 CSS @font-face

现在,需要使用的字体同时准备好了被浏览器所使用的两种格式,需要在网页中引用该字体,然后在标记中调用。
要让所有浏览器都能正确显示这种嵌入字体,其 CSS 代码非常简单。只需按正确顺序排列 @font-face 声明,这样所有浏览器就都可以调用合适的字体信息了:
image
声明 font-face 之后,就可以像其他系统内置字体一样使用了:
image
就是这样简单!准备好这种字体的两种格式,然后以正确的顺序引用它们,最后就可以在网页中使用它了。
 

 


本文转自wbpluto 51CTO博客,原文链接:http://blog.51cto.com/wbpluto/476708,如需转载请自行联系原作者

相关文章
|
3月前
|
前端开发 开发者 UED
Web 应用中显示页面字体使用的 font-based icons 技术讲解
Web 应用中显示页面字体使用的 font-based icons 技术讲解
35 0
|
存储 缓存 前端开发
一种兼容、更小、易用的WEB字体API
如何使用 Google Fonts CSS API 有效地使用WEB字体?
407 0
一种兼容、更小、易用的WEB字体API
解决IIS Web部署 svg/woff/woff2字体找不到问题
最近项目中用到了fontawesome-webfont.svg等字体。部署项目后,发现没有<,+等符号,字体也不对,发现浏览器总是报找不到woff、woff2字体的错误。
211 0
解决IIS Web部署 svg/woff/woff2字体找不到问题
|
前端开发
CSS之web字体使用并用该字体输出一首诗
我们需要提供一个或多个字体种类名称,浏览器会在列表中搜寻,直到找到它所运行的系统上可用的字体。
143 0
CSS之web字体使用并用该字体输出一首诗
|
前端开发 JavaScript iOS开发
|
前端开发 Java C++
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
|
人工智能 前端开发 iOS开发
CSS——web字体与CSS字体图标
CSS——web字体与CSS字体图标
160 0
CSS——web字体与CSS字体图标
|
前端开发
web前端学习(十五)——CSS3字体属性(font)的相关设置
web前端学习(十五)——CSS3字体属性(font)的相关设置
web前端学习(十五)——CSS3字体属性(font)的相关设置
|
XML 移动开发 前端开发
web前端学习(三)——HTML5的字体、特殊符号、插入图片及头部元素的相关标签设置
web前端学习(三)——HTML5的字体、特殊符号、插入图片及头部元素的相关标签设置
web前端学习(三)——HTML5的字体、特殊符号、插入图片及头部元素的相关标签设置
|
Web App开发 前端开发 Android开发
Web 字体 font-family 再探秘
Web 字体 font-family 再探秘
357 0
Web 字体 font-family 再探秘