HTML5时代CSS设置漂亮字体取代图片

HTML5时代，我们可以使用CSS来设置漂亮字体，而无需依赖图片。以下是完整的攻略：

1. 指定所需字体

首先，我们需要在CSS文件中指定要使用的字体。为了确保字体在用户的计算机上可用，我们需要提供一个备用选项。可以使用以下示例代码来设置字体：

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

在这个例子中，我们首先指定了“Open Sans”字体。如果该字体在用户的计算机上不可用，则显示下一个备选字体，即“Arial”，再不行，就使用默认的sans-serif字体。

2. 调整字体样式

有许多方法可以进一步调整字体的样式，包括更改大小、加粗、倾斜等。以下是一些示例：

h1 {
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

在这些示例中，我们使用了不同的CSS属性来调整样式。例如，我们使用“font-size”设置字体大小，“font-weight”设置字体粗细，“font-style”设置字体倾斜等。

实例说明

这里列举两个示例来说明如何用CSS设置漂亮字体取代图片。

示例一：使用Google Fonts

可以使用Google Fonts来获取许多漂亮的字体。在CSS中，我们首先载入所需字体，例如：

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

然后，在文件中的其他位置，就可以使用这些字体了，例如：

body {
  font-family: 'Open Sans', sans-serif;
}

在这个例子中，我们使用了Google Fonts中的Open Sans字体，并在页面的body元素中使用了该字体。

示例二：使用SVG图标

SVG图标是一种轻量级的矢量图形软件，可以很好地替代图像。可以使用CSS引入SVG图标并设置字体。以下是一个使用SVG图标的示例：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?x1860cd');
  src:  url('fonts/icomoon.eot?#iefix&x1860cd') format('embedded-opentype'),
    url('fonts/icomoon.ttf?x1860cd') format('truetype'),
    url('fonts/icomoon.woff?x1860cd') format('woff'),
    url('fonts/icomoon.svg?x1860cd#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: 'icomoon';
  content: attr(data-icon);
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在这个例子中，我们定义了一个名为“icomoon”的字体。然后，我们使用该字体来设置带有SVG图标的元素。例如：

<i class="icon-bell" data-icon="&#x25a2;"></i>

在这个例子中，我们向一个带有类名“icon-bell”的元素中添加了SVG图标。通过CSS，我们引入了新的字体，并从自定义字体中使用字符代码来设置SVG图标。

以上就是如何用CSS设置漂亮字体取代图片的完整攻略，希望对您有用。