[前端]网页中使用自定义字体

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文件,转换完成后生成以下字体:

[前端]网页中使用自定义字体_第1张图片

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>

你可能感兴趣的:(字体)