自定义web字体-通过@font-face在页面中嵌入 .woff格式字体的引用

最新推荐文章于 2024-09-19 07:03:25 发布

瑰

最新推荐文章于 2024-09-19 07:03:25 发布

阅读量7.8k

点赞数 1

分类专栏： HTML 文章标签： .woff的引用自定义web字体的引用

本文链接：https://blog.csdn.net/lovexiuwei/article/details/83623837

版权

HTML 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

woff文件样式查看链接
http://fontstore.baidu.com/static/editor/index.html 上传woff文件即可看到woff文件的展示效果
woff文件可以用python的fontTools 打开

font = TTFont('xxx.woff')    # 打开文件
font.saveXML('xxx/6329.xml')
font['cmap'] 映射关系unicode跟Name
ffont['glyf'][name].coordinates 字形的轮廓信息

在html5中嵌入字体 .woff格式的引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>测试</title>
    <link rel="stylesheet" href="css/myWebFont.css"></link>
</head>
<body>
<div class="col-sm-12">
    <div class="row list-icon">
        <div class="col-md-3">
            <i class="ui-icon mf mf-folderadd"></i>mf-folderadd
        </div>
    </div>
</div>
</body>
<html>

.woff的引用

@font-face {
	font-family: 'woff-文件名';
	font-style: normal;
	font-weight: 400;
	src: url(css/Monoton.woff2) format('woff2'),  //引入文件路径
             url('mywebfont.eot?#iefix') format('embedded-opentype'),
             url('mywebfont.woff2') format('woff2'),
             url('mywebfont.woff') format('woff'),
             url('mywebfont.ttf') format('truetype'),
             url('mywebfont.svg#mywebfontregular') format('svg');

	}