1

就语义、可访问性、可用性和 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/showing_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)
4

2 回答 2

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;
}
于 2016-07-26T10:41:25.043 回答
0

最后一个是最好的，因为一切都在 CSS 中。然而，它在 IE6 中不起作用——尽管我们都希望这个浏览器死掉，但它仍然很好用。

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

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

于 2010-03-05T06:58:52.707 回答