如何为基于HTML5和CSS3的网页使用图片标题 - 傻瓜

视频: Web 前端系列课程7 | Html中如何插入图片img？ | html+css入门开发 2025

通常，您应该为HTML5和CSS3网页的主要内容使用标准字体，有一个有限的字体阵列是不是一个大问题。有时候，你想在你的头条中使用字体。您可以使用图形编辑器（如GIMP）创建基于文本的图像，然后将它们合并到您的页面中。

<！ --1 - >

以下是使用特殊字体的过程：

计划您的页面。

使用图形时，会失去一点灵活性。你需要确切地知道标题应该是什么。您还需要知道标题将在什么级别显示。而不是依靠浏览器来显示标题，而是在图形工具中创建图形并将其直接放置在页面中。
创建您的图像。

您可以使用GIMP中的奇妙徽标功能（选择Xtns➩Script-fu➩徽标）创建您的文本。
直接指定字体大小。

在图像中，以像素为单位指定字体大小是有意义的，因为在这里您确实在讨论特定数量的像素。您正在图形编辑器中创建“虚拟文本”，因此请在完成的页面中将文本的大小设置为任意大小。
使用你想要的任何字体。

您不必担心用户是否拥有字体，因为您不是发送字体，只是使用字体组成的图像。为每个标题创建一个单独的图像。
这个练习有两个图像 - 1级标题和2级图像。由于您是直接创建图像，因此您需要跟踪图像如何传达其标题级别。考虑标题水平。

请务必使标题级别2的值看起来比级别1略小或略少。也就是说，如果在标题1设置中使用了图像，则应使用比图像更大的字体用于不太重要的标题级别。通常，这是通过调整图像的字体大小来完成的。
按照通常的方式构建页面。

创建这些专业图像后，建立一个常规的网页。将
和

标签放在您通常使用的相同位置。
在标题内放置
标签。
而不是普通文本，将图像标签放在
和

标签中。看到即将到来的代码imageTitles。 HTML如果你有点困惑。
将标题文字放在alt属性中。
alt属性在这里尤为重要，因为如果用户关闭了图形，文本仍会显示为相应样式的标题。连接速度慢的人会在图片加载前看到文字，使用文字阅读器的人仍然可以阅读图片的替代文字。
以下是用于生成基于图像的标题的代码：

imageTitles。 html

这个页面描述了历史上着名的牛

大多数人并不知道牛实际参加了战斗。他们当然没有。我刚刚做了。

这种技术是自定义图形和普通HTML之间的一个很好的折中，如下所示：

您可以很好地控制图像。

如果您熟练使用图形工具，则可以将任何类型的图像用作标题。除了你的技巧和创造力之外，没有任何限制。

页面保留其结构。 您的标题标签仍然存在，因此很容易看到您将特定图片用作标题。您仍然可以在HTML代码中看到页面组织。
您有后备文本。 如果图像无法显示，alt属性将会激活。图像标题的语义意义被保留。 alt标签提供了另一个很棒的功能。如果他们复制图像文本，这个文本仍然可用于屏幕阅读器和搜索引擎，所以文本不被掩埋在图像中。
这项技术对头条新闻或其他领域非常有用，但要注意标题文字在标签中重复出现。这很重要，因为你不想丢失文本。搜索引擎工具和屏幕阅读器需要文本。不要试图用这种技术来处理大量的正文。这样做会导致一些问题：
文本不再可搜索。 如果搜索引擎埋在图像中，则无法找到文本。

文字难以改变。

您无法使用文本编辑器更新您的页面。相反，您必须下载图像，进行修改并重新上传。