1.浏览器对字体格式的支持
| 浏览器类型 | 支持格式 |
|---|---|
| IE6 | 仅支持.eot格式 |
| IE7 | 仅支持.eot格式 |
| IE8 | 仅支持.eot格式 |
| Firefox 3.5 | 支持.ttf、.otf格式 |
| Firefox 3.6 | 支持.ttf、otf、WOFF格式 |
| Chrome | 支持.ttf、.otf、.svg格式 |
| Sagari | 支持.ttf、.otf、.svg格式 |
| Opera | 支持.ttf、.otf、.svg格式 |
2.Windows自带字体
windows自带字体在C:\Windows\Fonts目录下,字体格式为.ttf.
3.字体格式转换
- 第一步: https://onlinefontconverter.com/
- 第二步：勾选font-face
- 第三步：上传.ttf(或者其他格式字体文件)
- 第四步：转换，完成后下载.
- 比如上传*字体的.ttf文件,转换完成后生成以下字体：
4.嵌入自定义字体方法
打开font.css可以大致是这个样子：
@font-face {
font-family: 'mzd';
src: url('mzd.eot');
src: url('mzd.eot?#iefix') format('embedded-opentype'),
url('mzd.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
在HTML中导入该font.css文件，同时把生成的字体文件复制过去，保证路径正确.
实例及代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体转换</title>
<link rel="stylesheet" type="text/css" href="font.css">
<style type="text/css">
body{ font-family: mzd;}
p{font-size: 32px;}
h2{color:red;}
</style>
</head>
<body>
<h1> 沁园春•长沙</h1>
<h2>* </h2>
<p>独立寒秋,湘江北去，橘子洲头.</p>
<p>看万山红遍，层林尽染;漫江碧透,百舸争流。</p>
<p>鹰击长空，鱼翔浅底，万类霜天竞*.</p>
<p>问苍茫大地,谁主沉浮?</p>
</body>
</html>