13

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

但是当我用图标创建字体时，它比我所有的图标都大，因为有 svg、ttf、woff 和 eot，所有这 4 种字体都比所有 png 图标都大。

@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 图像。

这适用于所有浏览器吗？

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

还有什么替代品fontello.com？

4

5 回答 5

18

好问题。我目前正在尝试使用 Fontello 和字体图标，看看它是否是一种可行的方法。

这是一种可行的方法。我在生产应用程序中使用了基于字体的图标，并在几乎所有流行的浏览器/设备上进行了测试（Fontello 有甚至支持 IE7 的示例）。关于 Fontello，我只有好话要说，但你可以使用任何你想要的工具。

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

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

注意事项

  • 您将需要管理字体文件。这些不是人类可读的，因此您需要使用工具。
  • 有相关的 CSS 选择器需要维护（通常每个图标一个选择器）。
  • 有时需要额外的标记来实现特定的效果/解决问题。
  • 较小的尺寸问题；并非所有图标都均匀地填充一个框，并且它们受每个浏览器的文本渲染特性的影响。

与使用精灵或为每个图标同时创建 PNG/SVG 相比，这些考虑可能更少工作。

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

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

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

于 2012-09-20T14:26:13.013 回答
4

这个方便的网站向您展示了哪个浏览器支持 CSS 功能。在这种情况下 < IE9 会给你带来问题。

http://caniuse.com/#feat=fontface

就个人而言，我更喜欢将 CSS sprites 用于我的 UI 元素，以确保跨浏览器的一致性。

于 2012-09-20T14:20:39.173 回答
4

快速免责声明：我一直在研究一个名为pictonic的图标字体库。

当我用图标创建字体时，它比我所有的图标都大，因为有 svg、ttf、woff 和 eot，所有这 4 种字体都比所有 png 图标都大。

在文件大小方面，您可能会发现以下 png 与图标字体的比较有趣：

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

您应该使用跟踪验证图标是否正在转换为矢量格式。由于许多矢量格式（如 svg）也支持位图，如果您的图标被导入为位图，您将不会体验到将它们转换为矢量化字体的任何与文件大小相关的好处。

根据我的经验，即使是 16x16px，ttf 字体也应该比 20 个左右图标的组合文件大小小得多。随着图像大小的增加，这个差距会扩大，因为向量在每个比例上都具有相同的文件大小。

这适用于所有浏览器吗？

取决于你使用什么方法。pictonic 在所有浏览器上都经过测试，回到 ie5，但对于旧的 ie 版本（5-7）需要一点 js。所以理论上它可以让图标字体在所有浏览器中工作。

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

图标字体非常通用，您可以使用 css 操作它们，使图像图标看起来非常不灵活。这是一个演示：https ://pictonic.co/#main-demo

例如，您可以尝试您的布局，只需几行 css 即可更改所有图标的颜色、大小和阴影。这很方便。

此外，由于它们是基于矢量的，它们是开箱即用的视网膜，因此它们在视网膜屏幕上看起来很棒，就像在苹果视网膜显示器（视网膜 macbook、iphone 4+、ipad3+）上一样，而图像需要媒体查询以双倍交换占用更多空间的分辨率版本。

我相信如果您使用正确的格式，它们会非常有效。

还有 fontello.com 的替代品吗？

pictonic 尚不能导入用户生成的图标，但它确实允许您从 2000 多个令人惊叹的图标生成自定义图标字体，包括相当大的免费图标集。我们总是在添加更多，所以看看

于 2012-09-26T13:46:57.947 回答
2

您的另一种选择可能是：http: //fontastic.me/

;)

于 2013-07-09T20:28:13.247 回答
1
  1. 使用字体图标，您可以包含扩展名为 .woff、.ttf、.eot、.svg 的字体文件和该字体的 css 文件。它们的大小较小，您可以在需要时更改图标的大小，使用图像文件 png/jpeg 它会扭曲图像文件，而字体图标会正确缩放。
  2. 对于多个图像，您必须向服务器发出多个 http 请求，这可以在此处避免。
  3. 字体图标文件也可在 cdn 上使用，因此如果某些早期网站已将其缓存在浏览器中，则不必从服务器请求它。
  4. 使用 fontello，您可以自定义和仅使用所需的图标。
  5. 还有 fontawesome 当前版本 4.2，您可以在其中获取字体图标，如果您需要对旧版本浏览器的支持，您可以选择旧版本 3。
  6. 您还可以使用 LESS/SASS 对其进行自定义。
  7. 另一种选择是使用 css sprites，您可以使用传统方法或使用在线服务对其进行优化。
  8. 在 html 中使用它非常简单，一旦您确定 css 文件和字体文件已加载到浏览器中，您只需将类名添加到 html 元素就可以了，然后您可以自定义字体大小、颜色，背景颜色根据您的意愿。

字体真棒

丰泰洛

你可以在这里找到 CDN

于 2015-01-15T14:30:00.870 回答