字体图标vs png图标 [英] font icons vs png icons

问题描述

我使用标签的图标，但我看到这个网站： www.fontello.com 您可以创建带有图标的字体。

i use icons for labels, but i saw this website: www.fontello.com where you can create font with icons.

但是当我创建的图标字体比我所有的图标，因为有svg，ttf，woff和eot，所有4字体大于所有png图标。

But when i create font with icons it is bigger than all my icons, becouse there is svg, ttf, woff and eot, all that 4 fonts are bigger that all png icons.

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

我的所有图标都是optipng压缩的.png图片。

All my icons are optipng compressed .png images.

这是否适用于所有浏览器？

Does this work on all browsers ?

那么为什么要使用这种字体方法？

So why should i use this font method ?

还有 fontello.com ？

推荐答案

>好问题。 我目前正在试验Fontello和字体图标，看看它是否可行的方法。

这是一个可行的方法。我已经在生产应用程序中使用基于字体的图标，并在几乎每一个流行的浏览器/设备上测试（Fontello有甚至支持IE7的示例）。

It's a viable approach. I have used font-based icons in production applications and tested on nearly every popular browser/device (Fontello has examples which even support IE7). I have only good things to say about Fontello, but you can use any tool that you want.

字体图标可以缩放到所需的任何（比例）尺寸 >和可以处理任何像素密度。如果您在高密度显示器（例如Apple Retina）上查看您的网站，并在所有移动设备上越来越受欢迎，则光栅格式（如PNG）和向量格式之间存在巨大差异。

Font icons can scale to any whatever (proportionate) dimensions are desired and work on any pixel density. If you look at your site on a high density display (such as Apple Retina, and increasingly popular on all mobile devices) there is an enormous difference between a raster format (like PNG) and a vector format.

您可以在单个文件中定义所有图标（如sprite），但与sprite不同，您不必担心文件中项目的尺寸。此外，您可以独立于文件中的其他项目对每个项目进行缩放。

You can define all icons in a single file (like a sprite), but unlike a sprite you don't have to worry about the dimensions of the items within the file. Furthermore, you can scale each item independent of other items in the file.

注意事项

• 您将需要管理字体文件。


• 有相关的CSS选择器可供维护（通常每个图标一个选择器）。


• 偶尔需要额外加价以达成特定效果/解决问题。


• 小型调整问题;并非所有图标均匀地填充一个框，并且它们受到每个浏览器的文本呈现特性的限制。

• You will need to manage the font file. These are not human-readable, so you will need to use a tool.
• There are associated CSS selectors to maintain (usually one selector per icon).
• Extra markup is occasionally needed to achieve a particular effect/fix a problem.
• Minor sizing issues; not all icons fill a box uniformly and they are subject to the text rendering idiosyncrasies of each browser.

这些注意事项可能比使用精灵或为每个图标创建两个PNG / SVG。

These considerations are probably less work than using sprites or creating both PNGs/SVGs for every icon.

请记住，字体图标不包含任何颜色信息。但是，您可以像处理任何其他文本一样对其进行样式设置。这包括使用ARGB颜色和应用更高级的CSS效果，如评论中指出。

Keep in mind that a font icon does not contain any color information. However, you can style it as you would any other text. This includes using ARGB colors and applying more advanced CSS effects as pointed out in the comments.

关于文件大小，请记住，浏览器几乎不会下载所有4字体格式。正确完成后，通常只会下载一个。

Regarding file size, keep in mind that a browser will almost never download all 4 font formats. Done correctly, usually only one will be downloaded.

另一种方法是使用SVG（而不是SVG字体）作为图标。 SVG的浏览器支持小于 @ font-face 的浏览器支持，因此您需要一个光栅后备。

An alternative approach is to use SVGs (not SVG fonts) for icons. Browser support for SVGs is less than that of @font-face, so you will need a raster fallback.

这篇关于字体图标vs png图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！