使用CSS显示徽标的正确方法是什么？ [英] What is the proper way to display a logo with CSS?

问题描述

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

I've been learning CSS recently, and the tutorial series I'm watching says the best way to display a logo image is to wrap the text in an H1 tag, then set the CSS style for that tag to background image, with a text indent of -99999 or similarly large number.

这似乎令人难以置信的怪异和不雅。它也似乎使用CSS隐藏文本将是一个很大的没有为SEO目的（因为通过CSS隐藏文本被皱眉）。

This seems incredibly hackish and inelegant. It also seems like using CSS to hide text would be a big no-no for SEO purposes (as hiding text via CSS is frowned upon).

我也读过，使用img应该避免，因为标志本身不是真正的内容，所以应该放弃到编码的设计方即CSS）。

I've also read that using an img should be avoided, as the logo itself is not really content, so should be relegated to the design-side of the coding (i.e. CSS).

目前对此的一致意见是什么？

What is the current consensus on this?

推荐答案

显示徽标的方式是使用< img> 元素。如果您没有学习标志和标志，您可能不会意识到徽标有自己的语义，并且需要以非常具体的方式呈现。它也可以具有所需的解释，这是 [alt] 属性中应该使用的解释。

The correct way to display a Logo is with an <img> element. If you haven't studied logos and logotype, you might not realize that a logo has its own semantics and is required to be presented in a very specific manner. It may also have a required interpretation, which is what should be used in the [alt] attribute.

如果所需的解释是页面中的标题，将语义正确地添加到< h＃> 元素：

If that required interpretation is legitimately a heading in the page, it would be semantically correct to add it to a <h#> element:

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

通常标志用作链接，因此常见：

Typically the logo is used as a link, so it's common to see:

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

此外，可以强调标志（可以是或取决于学位）：

Additionally the logo can be emphasized (could be either or depending on degree):

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

---

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

---

To understand the semantics of a logo. If you're referencing the Coca-cola company, the logo for the brand would not, and should not change if you swapped out, or removed a stylesheet. Most people understand that semantically,

不同于

这篇关于使用CSS显示徽标的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！