使用CSS显示徽标的正确方法是什么？

Question

我最近一直在学习CSS，我正在观看的教程系列说明显示徽标图像的最佳方法是将文本包装在H1标签中，然后将该标签的CSS样式设置为背景图像，文本缩进为-99999或类似的大数字。

这似乎令人难以置信的hackish和不优雅。似乎使用CSS来隐藏文本对于SEO来说是一个很大的禁忌（因为通过CSS隐藏文本是不受欢迎的）。

我还读到应该避免使用img，因为徽标本身并不真正满足，所以应该降级到编码的设计方面（即CSS）。

目前对此有何共识？

Answer 1

显示徽标的正确方法是使用<img>元素。如果您还没有研究logos and logotype，您可能没有意识到徽标有自己的语义，需要以非常具体的方式呈现。它也可能有必要的解释，这应该是[alt]属性中应该使用的。

如果所需的解释在页面中是合法的标题，那么将它添加到<h#>元素在语义上是正确的：

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

通常，徽标用作链接，因此通常会看到：

<a href="/">
    <img src="logo.png"... />
</a>

此外，可以强调徽标（可以是或取决于程度）：

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

---

了解徽标的语义。如果你引用的是可口可乐公司，那么品牌的标识就不会，如果换掉，或者删除了样式表，就不应该改变。大多数人从语义上理解

与

不同

Answer 2

我总是在图像周围包裹锚标记：

<a href=""><img src=""></a>

或将锚标记创建为块并设置背景图像

<a class="logo" href="">Logo</a>

.logo { background: url("/path") no-repeat; width: 100px; height: 100px; display: block; text-indent: -9999px;}

Answer 3

您应始终使用img来显示徽标。使用h1并使用徽标作为背景是一种非常糟糕的做法，应该避免使用。您的徽标是内容，而不是h1。

Harry Roberts在他的帖子Your logo is an image, not a <h1>

中清楚地解释了这一点

Answer 4

我认为并不重要。有很多不同的方法可以做到这一点，他们都得到了支持。他们都工作。他们中的大多数都是搜索引擎友好和完全可访问。

我会做这样的事情：

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>

搜索引擎，文本模式浏览器和屏幕阅读器会看到替代文字，其他人都会看到徽标图片。