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

Question

我一直在学习CSS最近,和教程系列,我看说要显示标志图像的最好办法是包装在一个H1标签的文本,然后设置为标签的背景图像的CSS样式,用文本缩进-99999或类似的大数字.

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

我还读到应该避免使用img,因为徽标本身并不是真正的内容,所以应该降级到编码的设计方面(即CSS).

目前对此有何共识？

Answer 1

显示徽标的正确方法是使用<img>元素.如果您尚未学习徽标和徽标,则可能没有意识到徽标具有自己的语义,并且需要以非常具体的方式呈现.它也可能有一个必需的解释,这是[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 在他的帖子中清楚地解释了这一点 -你的标志是一个图像，而不是一个<h1>