css - 使用 CSS 显示 Logo 的正确方法是什么？

Question

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

这看起来非常骇人听闻且不雅。似乎使用 CSS 隐藏文本对于 SEO 目的来说也是一个很大的禁忌(因为通过 CSS 隐藏文本是不受欢迎的)。

我还读到应该避免使用 img，因为 Logo 本身并不是真正的内容，因此应该归属于编码的设计方面(即 CSS)。

目前对此的共识是什么？

Answer 1

显示 Logo 的正确方法是使用 <img>元素。如果你没学过logos and logotype ，您可能没有意识到 Logo 具有自己的语义并且需要以非常特定的方式呈现。它也可能有一个必需的解释，这是应该在 [alt] 中使用的内容。属性。

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

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

通常 Logo 用作链接，因此很常见:

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

此外，可以强调 Logo (可以是 <strong> 或 <em>，具体取决于程度):

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

---

了解 Logo 的语义。如果您引用的是可口可乐公司，则该品牌的 Logo 不会，如果您换掉或删除样式表也不应该更改。大多数人从语义上理解，

不同于