对带有图标和文本的按钮使用 @font-face
我很好奇 @font-face 是否适用于我正在开发的应用程序。 查看测试。
它并不完美，因此在开始实施之前我正在寻求建议和意见。你觉得还太早吗？浪费时间？或者说它是继ajax之后最棒的东西？
The other day I was cruising around and stopped on http://www.justbenicestudio.com/studio/websymbols which had a nice little article on using @font-face for icons in websites. To quote the author, "There are those points in every interactive designer's career when he becomes fed up with producing the same set of graphics all over again for every website he designs."
I was curious if @font-face would work for the app that I work on. Check out the test.
It's not perfect so I'm looking for suggestions and opinions before I start implementing this. Do you think it's too soon? A waste of time? Or is it the most awesome thing since ajax?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我个人建议现在还为时过早，大多数浏览器都支持@font-face，因此您会相对安全，但我认为没有任何充分的理由不安全地生成图像。通过为用户提供一张小图像而不是整个字体，您可能会节省用户更多的时间和带宽。如果您使用 Photoshop 或 gimp 等照片编辑器，只需保留您的文件，下次需要时即可使用它们。
I would personally suggest that it's too soon, most browsers support @font-face so you will be relatively safe but I don't see any good reason not to play it safe and produce the image. You're probably saving the user more time and bandwidth by giving them the one small image than the entire font. If you use a photo editor like photoshop or gimp, just keep your files and they will be ready for the next time you need them.
我仅在文本上使用了@font-face，但在您发布的链接中，按钮看起来很棒。我发现的唯一不一致之处是跨浏览器的“兼容性”（但仅从设计的角度来看）。不过，这只是小问题，如果您正在为移动设备（您提到的应用程序）进行设计，那么这些问题就不存在。当它是文本时，浏览器以不同的方式呈现字体（例如，IE9 不会拾取斜体，但呈现的像素化程度比 Chrome 少）。
我认为这是适应性与外观的问题。用图像（最好是精灵，根据我的口味）制作的按钮总是看起来不错，但每次想要制作新按钮时都必须编辑图像。带有 @font-face 的按钮很容易复制和修改，而且它们可能有助于搜索引擎优化，但浏览器的渲染效果有所不同。
I have used @font-face only on text, but in that link you posted the button looks great. The only inconsistency I find is with cross-browser "compatibility" (but only from a design point of view). It's minor issues, though, and non-existent if you are designing for mobile (you mentioned app). Browsers render the font differently when it's text (for example, IE9 is not picking up the italics, but the render is less pixelated than chrome).
I think it's an issue of adaptability vs looks. Buttons made with images (preferably sprites, for my taste) will always look good, but you have to edit the images every time you want to make a new button. Buttons with @font-face are easy peasy to duplicate and modify, plus they might help with seo, but you have the browsers rendering difference.