WebFont for Mac （字体处理）

WebFont Mac 是一款为MacOS平台上设计开发的字体处理工具. WebFont for Mac 可以将特定的字形导出为SVG和PNG文件. 支持无损转换，矢量缩放，不失真，并且你可以在WebFont Mac版首选项中设置输出的颜色和大小！现在，前端设计师们，可以来下载使用了！

WebFont Mac 软件介绍

WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题.它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持,进一步减少了字体的体积.在国外,WebFont 已经非常流行了,大量的网站使用了 WebFont 技术,而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务,这一切均带动了国外字体制作行业的高速发展.

WebFont Mac 功能介绍

WebFont Mac版的键盘快捷键:

Command +单击:选择多个不相邻的项目;

Shift +单击:选择相邻的项目.

右键单击导出所选的字形; 或使用菜单中的批量导出.

WebFont Mac 特色功能

1.支持选中、复制

2.支持 Ctrl+F 查找

3.对搜索引擎友好

4.支持工具翻译

5.支持无障碍访问,支持朗读

6.字体是矢量图形,支持矢量缩放,自动适配高清屏

7.文本修改方便

8.字形可以重复利用,节省网络资源

WebFont Mac 使用说明

1. 利用转换工具将本地字体转换为 webfont

2. 将转换好的字体上传到网站上面,确定其 URL

3. 在网页的 CSS 中使用 @font-face ,例如:

@font-face {

font-family: 'XiXia';

src: url('<URL>/fonts/xixia-webfont.eot');

src: url('<URL>/fonts/xixia-webfont.eot- #iefix') format('embedded-opentype'),

url('<URL>/fonts/xixia-webfont.woff') format('woff'),

url('<URL>/fonts/xixia-webfont.ttf') format('truetype'),

url('<URL>/fonts/xixia-webfont.svg#Regular') format('svg');

font-weight: normal;

font-style: normal;

}

4.写法如此冗长是为了保证诸多浏览器的兼容性,如果没有这个需求可以精简.

在文本中套用此字体,如

p { font-family: XiXia, sans-serif; }

WebFont Mac 优势环境

- 字体 -

• 网站设计者们可以无限制的使用好看的字体了,包括设计字体、手写字体等,好的- 设计当然需要优美的字体呈现.不是图片,是字体

- 优化搜索引擎排名 -

• 不是生成图片,而是使用真正的文本,您可以像文本一样复制粘贴.现在国内的网站设计者们都是将漂亮的字体做成图片,但是web- font是真正的文本.

- 适用性 -

• 虽然图片也可以呈现中文字体,但是Google、百度等搜索引擎无法辨认出图片的文字内容,无法搜索到网站相关内容.- 使用网络字体(web- font),则是呈现的真实的文字,无论是标题、内容都适合引用.

- 使用体验 -

• 图片在放大和缩小的过程中会产生变形或马赛克,网络字体(web- font)采用的是矢量字体,支持无级缩放,不管放多大或缩再小都不会产生变形或模糊,给用户一致的体验.

- 文本修改编辑更方便 - 

• 图片每次都得重新编辑和生成,耗费人力和时间,扩展很不方便,而网络字体(web- font)是真正的文字,随时可添加删除.

WebFont Mac 劣势困境

既然 WebFont 有如此多优势,为何中文站点依然很少采用?这里主要是三个"中国特色"造成的:

- 中文字体体积 -

• 英文只有 26 个字母,一套字体不过几十 KB;而汉字却有数万个,导致字体文件通常有好几 MB 大小,文件体积比英文字体大数百倍,按照中国网络环境的现状,用于实际项目中显然不现实.

- 浏览器类型 -

• 国内浏览器市场异常繁荣,从 IE6 到各种壳的浏览器,他们对字体格式的支持也不一样,字体格式转换相当繁琐.

WebFont Mac 小编点评

相信WebFont Mac会前端设计师们带来的不仅仅是字体的转换。而是更优秀的前端作品！