根据W3C标准:注意。建议使用OpenType或TrueType字体的实现使用字体的OS/2表中的度量标准“sTypoAscender”和“sTypoDescender”用于A和D(在缩放到当前元素的字体大小之后)。如果没有这些指标,则应使用HHEA表中的“上升”和“下降”指标。字体的A和D部分是根据OS/2表中的sTypoAscender和sTypoDescender或HHEA表中的Ascent和Descent来计算的,下面使用一个工具来计算字体的这四个属性:const{Font}=require('fonteditor-核心');const{readFileSync}=require('fs');functioninfo(font){if(/\.(ttf|otf|woff|eot)$/.test(font)){consttype=RegExp.$1;constbuffer=readFileSync(字体);constdata=Font.create(buffer,{type}).得到();console.log(`\x1b[41m\x1b[37m[${font}]信息\x1b[0m`);['OS/2.sTypoAscender','OS/2.sTypoDescender','hhea.ascent','hhea.descent'].forEach(函数日志(property){const[prop1,prop2]=property.split('.');console.log(`\x1b[32m${property}:\x1b[0m${data[prop1][prop2]}`);});}else{thrownewError('Unknownfonttype!');}}从IconFont.CN下载的字体都有一个基线设置,通过定义一个兼容大部分中文字体的基线来保持图标和文字的对齐。具体信息请看这里。我使用的工具是svgicons2svgfont->svg2ttf->fonteditor-core。设置的基线和下端重合,使图标表现得像一张图片。这个工具生成的工具可以把图标当成图片,有时候比对齐两种不认识的字体更方便。至于大小问题,ICONFONT的大小是由font-size控制的。font-size的大小决定了ICONFONT大小的EM框(相当于SVG文件的viewBox)。因此,如果SVG图标中的路径没有填满画布,渲染的字体在视觉上将不会严格等于font-size。总结:确保ICONFONT的基线和大小是熟练使用ICONFONT布局的基础。之前没有对这方面做详细的研究,所以在项目中用到的ICONFONT不多。经过这次探索,我终于有了新的选择。
