使用字体作为图标... | CSS-Tricks

Marco Berrocal

# 2011年11月18日

等等，您使用基于图标的字体来显示实际的... 呃，图标？

Trickat

# 2011年11月18日

太棒了！
谢谢 chris

hiren

评论永久链接# 2014年3月9日

同意 Trickat 的观点，太棒了。谢谢分享。

Chris Morgan

# 2011年11月18日

我认为“SVG 更好”的主要论点应该是你可以拥有非单色图标。

Rob

评论永久链接# 2011年11月21日

SVG 最大的问题是它完全不受 Android 的默认浏览器支持，因此一大块移动用户将被排除在外。

sdsadsa

# 2011年11月18日

在 Firefox 8.0 中，当您使用 base64 编码字体时，这现在不起作用。

例如。

@font-face {
font-family: "ico";
font-style: normal;
font-weight: 500;
src: url("data:font/opentype;base64,T1RUTwALAIAAAwAwQ0ZGIH4UPXMAAAR8AABDyEZGVE1d7…..

Richard Ayotte

# 2011年11月18日

好主意！

Corey

# 2011年11月18日

也不要忘记基本的 HTML 实体。例如，电话和传真（打印）（在评论中无法调整字体大小，但您明白我的意思）
☎ ⎙

Hompimpa

# 2011年11月18日

我在使用 CSS3 的导航菜单示例中看到过一种用作图标的字体。我认为它非常棒。

http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/

Raphael Lopes

评论永久链接# 2011年11月22日

这非常好... =)

Graham

# 2011年11月19日

我知道这篇文章比较旧了，但它对伪元素可访问性修复有不同意见，声称它在实践中不起作用（尽管它应该起作用）：http://filamentgroup.com/lab/dingbat_webfonts_accessibility_issues/

sage

# 2011年11月19日

您可以添加“其他常见论点”，即您只能创建“单色图标”。

jacksaidwhat

# 2011年11月19日

使用字体作为图标是实现可缩放性的好方法。唯一的限制是颜色（以及与恐龙浏览器可能的兼容性）。

Levani

# 2011年11月19日

好主意。我在哪里可以看到此类字体图标的完整列表？

Duje Dorotić

# 2011年11月19日

太棒了！

Gilly

# 2011年11月19日

我正在 Sharepoint 中创建页面，我想知道如何在内容编辑器 Web 部件中使用 CSS。

我想使用它们来创建指向其他页面的超链接。无需复杂的编程。我只想使用代码来创建漂亮的按钮，调整一些参数，并使用我的链接。

您能指引我一个带有说明的解决方案吗？我是一个新手开发者... ;)

顺便说一下，带有滑块的演示页面非常棒！还有这个网站。

谢谢

Gilly

评论永久链接# 2011年11月19日

经过一番调查，看来我应该将 CSS 代码放在一个文本（或 HTML？）文件中，并在内容编辑器 Web 部件的代码窗口中进行说明。

所以回到我的最初主题，是否可以在一个文本文件中包含所有内容并使其正常工作？如何实现？

:)

cnwtx

# 2011年11月19日

太棒了！

gxg

# 2011年11月19日

太棒了！很难反驳它，因为它简单而有效。我在我的博客上使用了类似的东西来创建 RSS、Twitter、Facebook 的分享图标 - 另一个优势是您可以通过使用与标题相同的字体将其轻松地集成到网站设计中。

Ruben Rojas

# 2011年11月19日

这是最好的主意，对于网站来说非常棒。

Danielw

# 2011年11月19日

我一直想为某个项目做这样的事情，但我还没有使用它，因为有一个很好的原因，而您在这篇文章中没有提到！
那就是 webfont 在不同的浏览器中渲染方式不同，因此我还没有使用它，因为我必须进行很多 CSS 调整和技巧才能确保在所有浏览器中都能得到相同的结果...

但这个想法很棒，我相信我将来会找到一个可以用到它的项目，但现在我仍然坚持使用 sprites...

Ahmad Awais

# 2011年11月19日

很棒的文章 chris！我刚收到邮件中的文章，很喜欢！
我还要感谢您在文章底部使用了漂亮的社交按钮！

Ahmad Awais

# 2011年11月19日

如果您能为我们制作一个简单的应用程序，比如按钮制作器，那就太好了！这样我们就可以选择一个特定图标并设置自定义宽度和其他属性！然后您的应用程序将输出代码！

Arnaud

# 2011年11月19日

您好！这里有一个使用 @font-face 的免费图标集：Raphael 图标集。请查看，我在我的作品集中使用它。祝好！

Andrew

# 2011年11月19日

是我自己有问题，还是 Tumblr 和字体有问题？这在 Opera 和 Chrome 中可以正常工作，但在 Firefox 和 IE 中不行。

aurel

# 2011年11月19日

我喜欢它，但我不知道它是怎么工作的，您最初是在哪里获得这些字母/图标的？这可能是一个愚蠢的问题，抱歉。

aurel

评论永久链接# 2011年11月19日

抱歉，我明白了，是我自己愚蠢了:)

很棒，很棒的想法

Keyamoon

# 2011年11月19日

如果您只是使用像 pictos 这样的大字体，这种方法存在一个大问题。此字体包含许多您可能永远不会在网页中使用的图标。这就是我制作“IconFonts”字体生成器的目的。此工具允许您选择所需的图标，然后可以将它们分配给不同的字母。因此，结果将更加高效。您可以在这里查看：http//keyamoon.com/icomoon/

还可以查看这个实时演示页面：http://keyamoon.com/icomoon/#toDemos

IT Mitică

评论永久链接# 2011年11月20日

“b 加载中”… 这是什么意思？ ;)
Keyamoon

评论永久链接# 2011年11月20日

这个“b”可能只是在加载字体时临时出现。不要理会加载；加载完成后查看网站。
IT Mitică

评论永久链接# 2011年11月20日

不，这个“b”会一直出现，因为我和其他人使用 NoScript 等工具来阻止某些资源。

我知道问题是什么，现在你也知道了：字体图标依赖于 JS 代码来提供它们。没有 JS，就没有自定义字体，就没有 webfont，就没有字体图标。
Chris Coyier

评论永久链接# 2011 年 11 月 20 日

@font-face 绝对不需要 JavaScript。
IT Mitică

评论永久链接# 2011 年 11 月 21 日

在幕后它确实需要。@font-face 是一个依赖于 JS 代码的嵌入。

顺便说一句，你的 h1 kulturista-web-1 在我的 NoScript 保护环境中没有显示 :)
Chris Coyier

评论永久链接# 2011 年 11 月 21 日

不，它没有。CSS-Tricks 自定义字体可以，因为它们来自 TypeKit，它通过 JavaScript 完成了它的工作。但 @font-face 本身不需要 JavaScript。

要确认，从 Font Squirrel 获取一个 @font-face 工具包，例如：http://www.fontsquirrel.com/fonts/Cloister-Black

在您关闭了 JavaScript 的浏览器中打开 demo.html 文件。自定义字体应该会正常显示。（我刚刚尝试了，它确实显示了）。
IT Mitică

评论永久链接# 2011 年 11 月 21 日

我们还在谈论 NoScript 吗？
IT Mitică

评论永久链接# 2011 年 11 月 21 日

好的 :)

显然，NoScript 不是您的首选。
IT Mitică

评论永久链接# 2011 年 11 月 21 日

这篇文章让我思考了一下。

奇怪的是，浏览器还没有内置方法来帮助那些想要阻止加载 @font-face 资源的用户。

我想在不远的将来，它们也会有一个，就像图像、样式、加载项等的情况一样。
迈克尔·冈纳

评论永久链接# 2011 年 11 月 22 日

正如 Chris 所说，font-face 不需要 Javascript，因此不需要 noscript hack。它与 Javascript 毫无关系。我不确定你为什么要禁用 font-face。话虽如此，我认为网页设计师应该认真考虑某些字体对那些视力不好的人的易读性 - 也许如果您使用奇怪的装饰字体，您可以在网站上提供一些选项，让用户可以关闭那些难以阅读的字体。
IT Mitică

评论永久链接# 2011 年 11 月 22 日

看来你也不喜欢 NoScript：http://noscript.net :)

我的观点围绕着这样一个事实：@font-face 实际上意味着一个可下载的资源。

像 Javascript、图像、ActiveX、样式表、flash 这样的可下载资源可以使用标准的浏览器选项阻止加载。

到目前为止，据我所知，只有 NoScript 为您提供了作为用户控制其自身环境的选项，因为它应该正常工作。

我猜 @font-face 很快就会受到审查，并且也会为它添加一个选项，以便用户可以对自己的机器上运行的内容进行决定。

也许你不相信这些东西，但对我来说，出于各种原因，安全和其他因素，它实际上比响应式布局或可访问性更重要。
IT Mitică

评论永久链接# 2011 年 11 月 22 日

考虑一下这个方面

有人使用 @font-face 在您的机器上用自定义的攻击性符号替换通常的字母。

恶作剧或恶意，这是滥用的敞开大门。

这个列表可以继续，因为不幸的是，想象力一直是为邪恶服务的工具，就像它一直是做好事的工具一样。
IT Mitică

评论永久链接# 2011 年 11 月 22 日

用更轻松和幼稚的语气说

使用自定义的网络字体，一条写着“我正在写一篇关于 @font-face 的文章”的信息，用正常的字体显示，可以通过在自定义字体中替换字形来神奇地变成秘密爱情信息或间谍信息，这些字形只在特定条件下提供：登录等等 :)

IT Mitică

# 2011 年 11 月 20 日

它应该可以工作，至少理论上可以。

在实践中，“*dings” 字体就是无法工作。为什么现在会改变呢？

别再提偶尔出现的渲染丑陋，这只会损害您的设计，而不会帮助它。这是我最相信字体图标永远不会奏效的论据。

Keyamoon

评论永久链接# 2011 年 11 月 20 日

它在实践中是有效的。例如，看看我的导航栏上的图标。
http://keyamoon.com/icomoon/
它们都是用这种方法完成的。我已经在所有现代浏览器以及 IE8 和 IE7 中测试过了。
IT Mitică

评论永久链接# 2011 年 11 月 20 日

我想，这取决于实践 :)

网站设计

# 2011 年 11 月 20 日

哇，这太棒了，我已经给我们的开发团队发了邮件，让他们开始使用本文中的信息。一旦我们在项目中使用了这些信息，我们就会分享并向您展示我们能够做些什么。

Keyamoon

# 2011 年 11 月 20 日

为了可访问性，我想到了一种不错的解决方案。

对于那些实际读取 CSS 内容的屏幕阅读器，我们可以这样做


.icon-home-b:before {
content: 'Home';
width: 1em;
overflow: hidden;
display: inline-block; /* May or may not be needed depending on the situation */
}

这样，这些屏幕阅读器就会为我们的图标读取“主页”。假设我们的字体为字母“H”提供了一个主页图标，图标将正常显示。

Chris Coyier

评论永久链接# 2011 年 11 月 20 日

巧妙的想法，但很多事情都可能出错。首先，如果链接的文本已经是“主页”，屏幕阅读器会读取“主页主页”。其次，如果 1em 与一个图标的宽度完全相同，这也是一个赌注（我认为）。

尽管如此，我还是喜欢这种解决问题的思路。我认为解决方案是将字体中的图标映射到屏幕阅读器不会读取的字符。
Keyamoon

评论永久链接# 2011 年 11 月 20 日

是的，我也想到了“主页主页”这个问题。也许用“主页图标 -”作为内容会更好？听起来仍然有点奇怪 :/

1em 应该没问题。因为如果我们字体中所有的图标都适合一个正方形（图标通常是正方形的），那么它们都具有相同的宽度，这也等效于 1em。

但是，是的，有点棘手。我喜欢您将图标映射到屏幕阅读器不会读取的字母的解决方案。我可能会在我的字体生成器中使用它。

phantom.omaga

# 2011 年 11 月 20 日

是的，我完全同意。它绝对是一个很棒的想法，正如您所指出的那样，它确实可以节省时间，效率更高。
所以谢谢!!!!!

斯科特·维维安

# 2011 年 11 月 20 日

用无用的字母表示图标对我来说并不合适。不仅对于屏幕阅读器，还包括没有 JavaScript 的人和搜索引擎。将它们保留为伪元素现在可以，但我们知道许多开发人员会滥用它们。在某个时刻，屏幕阅读器和搜索引擎会变得足够智能，可以读取伪元素。

如果图标在 Unicode 字符上会更好 - 有一些“免费”的位置可以用于任何字符，并且您可以为现有的字符使用更好的图标（例如，Corey 在上面发布的 ☎，可以是一个移动电话图标）。 heck，即使是标点符号也是比 A-Z 更好的选择。

lightglitch

# 2011 年 11 月 20 日

我在 http://lightglitch.github.com/bootstrap-xtra/ 中使用了这种技术，但我遇到了字体在 Linux 中呈现的问题，它似乎与 Windows 不同。

您是否遇到了这个问题？您是如何解决的？

gustavodiazjaimes

# 2011 年 11 月 20 日

为什么不使用 utf-8 符号而不是字母？

gustavodiazjaimes

评论永久链接# 2011 年 11 月 21 日

例如：http://www.fileformat.info/info/unicode/block/miscellaneous_symbols/utf8test.htm
♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯

如果字体中定义了该符号，则未找到符号的方框将不会显示。
曼迪

评论永久链接# 2011 年 11 月 28 日

Unicode 是一个更好、更可靠的提供图标的方式，它确保用户习惯于某些符号代表某些东西，而不是每个人都使用自己的愚蠢图标字体来推断完全不同的东西。此外，屏幕阅读器已经知道如何发音这些字符。

我不确定为什么 Chris 会纵容这种做法，因为网页字体在 Windows 机器上呈现效果很差，即使在 Mac 上也是如此，如果您将他的示例中的字体大小从 62px 调整到更合理的 10-12px 以用于图标，它们会因为抗锯齿而变得模糊，从而抵消了使用它们的意义。我像其他任何人一样希望能够整合类似的东西，但现在它看起来并不好，只是另一种让不善于学习的设计师迷惑/沮丧用户的方式。

http://www.personal.psu.edu/ejp10/blogs/gotunicode/2009/08/accessibility-and-unicode.html

这篇文章已经有些年头了，但我认为它仍然非常相关。

皮纳金

# 2011 年 11 月 21 日

很棒的帖子，你对 CSS 的掌握真的很厉害！你提供这方面的教学吗？:D 如果你提供，我想订阅你的课程 :) 即使是我们大学的教授也无法如此精通 CSS :)

迈克尔·冈纳

# 2011 年 11 月 21 日

我尝试过使用字体来制作酷炫的小型加载图标，而不是使用动画 GIF。不幸的是，并非所有圆形图标的中心都真正位于中间，因此很多图标在旋转时会偏离中心。然而，我确实取得了一些成功。您可以在这里查看我的混合结果：http://jsfiddle.net/GXJnN/7/

是的，它们并不完美，但其中有几个你可以肯定地使用，而且当它们缩小到更小的尺寸时，偏离中心的问题就不那么明显了。

享受！

jumancy

# 2011 年 11 月 21 日

酷

Mikkel

# 2011 年 11 月 21 日

哈哈，我喜欢那个演示页面！

Paul

# 2011 年 11 月 21 日

同意，这是最好的方法。很酷。

Guilherme Ventura

# 2011 年 11 月 21 日

很棒的教程！

我已经在使用这种技术了，但我担心只有一件事：使用伪选择器 :before，无论如何，我知道这只会影响用户的可访问性问题。

致敬！

roy

# 2011 年 11 月 21 日

太酷了。可能要看看自己如何使用它。

John Natoli

# 2011 年 11 月 21 日

太棒了。就是这样。

ThomasH

# 2011 年 11 月 22 日

天才！有人知道 Google Web Fonts 中有哪些包含良好图标/花体的字体吗？

Todd Parker

# 2011 年 11 月 22 日

很棒的作品，一如既往的 Chris。当我开始使用 jQuery Mobile 的时候，我就很兴奋地使用字体来制作图标，但支持很零散。这让我再次兴奋起来，因为已经过去了一年多，所以我在实验室里对各种移动设备测试了你的演示页面。我想分享一下结果
https://github.com/jquery/jquery-mobile/wiki/Fonts-for-icons—support-on-mobile-browsers

简而言之，加载自定义字体在许多较新的移动平台上都能正常工作，但黑莓、WebOS、旧版本的 Android 和 iOS 都无法加载字体，你只能使用默认的字体设置，并且显示奇特的字符而不是图标。

所以，只有当我们能想出只对支持它的浏览器应用这种技术的方法时，这才是可行的，因为它不能优雅地失败。如果我们能解决这个问题，这将是金子。

Foxumon

# 2011 年 11 月 22 日

这真是太棒了 :3

Bacha

# 2011 年 11 月 23 日

太棒了，我有大量的 CSS 代码，但我总是记不住在合适的时候使用。有人可以告诉我如何轻松地记住大量代码吗？谢谢。

Joakim Hedlund

# 2011 年 11 月 23 日

也许我在重复别人的结论，或者说的是显而易见的事情，但我忍不住想到，这种方法对屏幕阅读器来说非常不友好。

题外话：有没有办法在有人回复我的评论时收到通知？我通常会忘记在点击发送后立即查看。

bacha

评论永久链接# 2011 年 11 月 24 日

好吧，这就是你展示的，这就是我或其他人这样做的原因。

Robert

# 2011 年 11 月 27 日

找不到关于字体总重量的信息。

Andrés Sanhueza

# 2011 年 12 月 9 日

对于字体设计师来说，为了避免在没有明确的 Unicode 等价物的情况下（这可能是一半时间的情况）使用任意字符作为 CSS 图标，理想的解决方案是使用许多 OpenType 字体的做法：将通用装饰作为“项目符号”字符（U+2022）的备用字符映射。OpenType 功能可以通过 CSS3 中的 font-feature-settings 属性访问，但目前只有 Mozilla Firefox 引擎（Gecko）支持，而且是实验性的。

Keyamoon

# 2011 年 12 月 16 日

我已经解决了屏幕阅读器的问题。我的图标字体生成器现在提供了一个选项，可以将你的图标分配到 Unicode 的“补充私有使用区域”。观看这个简短的视频演示，看看苹果的 VoiceOver 如何读取包含图标字体的页面。你可以看到 VoiceOver 没有读出任何额外的字母。通过这次更新，IcoMoon 成为第一个，也是目前唯一一个与屏幕阅读器完全兼容的图标字体。如果你有兴趣，可以下载免费版本。这个软件包目前包含 40 个图标，但随着时间的推移，将添加更多图标 :)

Laurent

# 2012 年 1 月 5 日

你如何处理 IE 和 Firefox 中的字体平滑问题？