9、HTML5排版与特效：从字体到游戏开发全解析

HTML5排版与特效：从字体到游戏开发全解析

1. 网页字体的使用

在网页设计中，不同浏览器对字体类型的支持存在差异。为了确保各种浏览器都能正确显示自定义字体，需要上传不同格式的字体文件到服务器，并在 @font-face 声明中指定所有格式。以下是一个示例：

@font-face {
  font-family: "Lemon";
  src: url("/https/blog.csdn.net/fonts/lemon.woff") format("woff"),
       url("/https/blog.csdn.net/fonts/lemon.eot") format("eot"),
       url("/https/blog.csdn.net/fonts/lemon.ttf") format("truetype"),
       url("/https/blog.csdn.net/fonts/lemon.svg#font") format("svg");
}

目前，不同浏览器对字体文件的支持情况如下：
| 浏览器 | 支持的字体文件格式 |
| ---- | ---- |
| Google Chrome、Firefox 3.6、Microsoft Internet Explorer 9 | .woff |
| Safari、Opera、Android | .ttf |
| Apple’s iOS | .svg |

另外，还可以将整个字体文件编码为Data - URI字符串并嵌入到CSS中：

@font-face {
  font-family: "Lemon";
  sr