使用@ font-face作为带有图标和文本的按钮

时间:2011-11-22 23:24:17

标签: css user-interface fonts font-face user-experience

前几天我正在巡航并停在http://www.justbenicestudio.com/studio/websymbols上,其中有一篇关于在网站中使用@ font-face图标的好文章。引用作者的话说:“每个互动设计师的职业生涯都有这些要点,因为他厌倦了为他设计的每个网站重新制作相同的图形集。”

我很好奇@ font-face是否适用于我所使用的应用程序。 Check out the test

它并不完美,所以在我开始实施之前,我正在寻找建议和意见。你认为这太早了吗?浪费时间?或者它是自ajax以来最棒的东西?

2 个答案:

答案 0 :(得分:0)

我个人认为现在太早了,大多数浏览器都支持@ font-face所以你会相对安全,但我认为没有任何理由不安全地制作图像。您可能通过为用户提供比整个字体更小的图像来为用户节省更多时间和带宽。如果你使用像photoshop或gimp这样的照片编辑器,只需保存你的文件,它们就会在你下次需要时准备就绪。

答案 1 :(得分:0)

我只在文字上使用了@ font-face,但在那个链接中你发布的按钮看起来很棒。我发现唯一不一致的是跨浏览器“兼容性”(但仅从设计的角度来看)。但是,这是一个小问题,如果您正在设计移动设备(您提到应用程序),则不存在。浏览器在文本时以不同的方式呈现字体(例如,IE9没有拾取斜体,但渲染的像素化程度低于chrome)。

我认为这是一个适应性与外观相关的问题。使用图像制作的按钮(最好是精灵,根据我的口味)总是看起来不错,但每次要制作新按钮时都必须编辑图像。使用@ font-face的按钮很容易复制和修改,而且它们可能对seo有帮助,但是你有浏览器呈现差异。