使用web字体并使用CSS进行样式设置

使用Font Squirrel网络字体生成器或谷歌提供的网络字体创建您自己的网络字体。请确保您拥有使用webfont的许可证。网络字体通常是几个文件，用于各种浏览器，所以为了方便起见，我会把它们放在文件夹中。

在CSS中，webfont的使用有两个阶段：

1. 定义字体
2. 将字体家族用于特定的CSS元素/classes/id

例如：假设您有一个名为Alef的网络字体。你生成它，在文件夹中你会得到8个文件——4个常规文件，4个粗体文件。对于每个组，您都有扩展名为.eot、.woff、.ttf和.svg 的文件

在CSS文件中定义字体系列

@font-face {
font-family: 'Alef';
src: url('Alef-Bold.eot');
src: url('Alef-Bold.eot?#iefix') format('embedded-opentype'),
     url('Alef-Bold.woff') format('woff'),
     url('Alef-Bold.ttf') format('truetype'),
     url('Alef-Bold.svg#alefbold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Alef';
src: url('Alef-Regular.eot');
src: url('Alef-Regular.eot?#iefix') format('embedded-opentype'),
     url('Alef-Regular.woff') format('woff'),
     url('Alef-Regular.ttf') format('truetype'),
     url('Alef-Regular.svg#alefregular') format('svg');
font-weight: normal;
font-style: normal;
}

请注意上面CSS中的字体系列名称和字体重量定义。同一个字体系列可以有普通和粗体字体以及普通和斜体字体样式。

为CSS元素/class/id设置字体系列

p, .alef, #someid {
  font-family: Alef;
}

使用CSS为文本添加效果

以下是一些文本效果，例如css3gen.com例如，3dtext类上的3D文本：

.3dtext {
  color:#000000;
  background-color:#ffffff;
  text-shadow:2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;
}

就是这样！