@Font-face的基本用法及让全部浏览器都兼容的方法

下面我来详细讲解一下“@Font-face的基本用法及让全部浏览器都兼容的方法”。

1. @font-face的基本用法

@font-face是CSS3新增的一个规则，可以让我们在Web中使用自定义字体。它的基本用法如下：

@font-face {
  font-family: 'MyFont'; /* 自定义字体名称 */
  src: url('myfont.woff2') format('woff2'), /* 字体文件路径和格式 */
       url('myfont.woff') format('woff');
  font-weight: normal; /* 字体的粗细程度 */
  font-style: normal; /* 字体是否倾斜 */
}

通过上述代码块的定义，我们就可以在CSS中使用指定的自定义字体了：

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

其中，font-family中的第一个参数就是@font-face中定义的自定义字体名称，第二个参数则是备选字体，如果无法加载自定义字体，就会使用备选字体。

需要注意的是，不同字体格式对应的文件名和后缀不同。如上述代码中，字体格式为woff2和woff，文件名分别为myfont.woff2和myfont.woff。

2. 让所有浏览器都兼容@font-face

由于不同浏览器对于自定义字体的支持不同，可能会导致我们在某些浏览器上无法正确地显示自定义字体。解决方案是使用不同格式的字体文件，以支持所有浏览器。

下面是一个完整的@font-face示例，包含了所有可能需要的字体格式：

@font-face {
  font-family: 'MyFont'; /* 自定义字体名称 */
  src: url('myfont.eot'); /* IE6-8 */
  src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE9 */
    url('myfont.woff2') format('woff2'), /* 高版本 Chrome / Firefox / Edge */
    url('myfont.woff') format('woff'), /* 低版本 Chrome / Firefox / Edge */
    url('myfont.ttf') format('truetype'), /* Safari, Android, iOS */
    url('myfont.svg#MyFont') format('svg'); /* iOS 中的 Safari */
  font-weight: normal; /* 字体的粗细程度 */
  font-style: normal; /* 字体是否倾斜 */
}

在上述代码中，我们使用了EOT、WOFF、TTF和SVG等4种不同格式的字体文件，以保证所有浏览器都能够正确地显示自定义字体。其中，EOT和SVG是针对IE浏览器和iOS中的Safari浏览器的兼容性处理。