链接 PDF（带图标）的最佳方法是什么？

Question

就语义、可访问性、可用性和 SEO 而言，在页面上链接 PDF（带图标）的首选方法是什么？

例如

• ，这是 PDF 的名称“01ccc5.pdf” 但在 PDF 中，这是标题 PDF“如何在长 PDF 中搜索” 我应该使用 PDF 主题作为文件吗 名称如“How-to-search-in-long-PDF？”
• 并且我想将 PDF 的链接显示为 页面上的 PDF 图标是什么 就可访问性而言的最佳方式 和可用性。
• 我应该插入 pdf 图标作为 里面或者我应该用作CSS 背景？

---

哪种方法更好？这个

a{text-indent:-99999px}

<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF 
<img src=pdf-icon.jpg" alt="How to search in long PDF" />
</a> 

---

或这个

  a{text-indent:-99999px;background:url(pdf-icon.jpg);width:32px:height:32px}

或这个方法 http://www.askthecssguy.com/2006/12/ shown_hyperlink_cues_with_cs_1.html

<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF </a> 

我必须链接多个 PDF

---

注意：

PDF 的标题也将在 PDF 之前可用，但没有任何链接，

如下所示：

Title                                      PDF

How to search in long PDF                  PDF icon (with link of PDF)

How to search in long PDF                  PDF icon (with link of PDF)

How to search in long PDF                  PDF icon (with link of PDF)

Answer 1

使用 CSS3 在每个链接中添加 pdf 或其他图标的简单方法：

1.图标通过背景图像 -> CSS 代码：

a[href$=".pdf"]
{
  background:url("your-pdf-image.png") no-repeat left;
  padding-left:25px;
}

2.从 FontAwesome 带来图标 -> CSS 代码：

a[href$=".pdf"]:before
{
  content:"\f1c1  ";
  font-family: fontawesome;
}

Answer 2

最后一个是最好的，因为所有内容都在 CSS 中。然而，它在 IE6 中不起作用——尽管我们都希望这个浏览器消失，但它仍然被广泛使用。

因此，我将使用第二个，带有一个特殊的类（例如a.pdf）。如果您有多个具有不同文件类型的链接，请使用 sprites。

编辑：我刚刚明白你为什么使用负文本缩进。我不确定它是否能在背景下正常工作。在这种情况下，我可能会使用带有 alt 文本的 img，而 a 没有文本内容。我几乎总是喜欢使用文本和图像，尤其是下载链接。