自定義web字型-通過@font-face在頁面中嵌入 .woff格式字型的引用
阿新 • • 發佈：2018-11-05
-
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'); }