CSS > ICONFONT 基线和大小问题

jindong 发布于2019-08-30 15:53 / 702人阅读

摘要：根据标准字体的和两部分是根据表中和或者表中的和来计算的下面用了一个工具来计算字体的这四个属性从下载下来的字体有一个基线设置通过定义一个能兼容绝大部分中文字体的基线来使得保持图标和文字的对齐具体信息可以看这里我所用的工具这个流程走下来

根据 W3C 标准：

Note. It is recommended that implementations that use OpenType or TrueType fonts use the metrics "sTypoAscender" and "sTypoDescender" from the font"s OS/2 table for A and D (after scaling to the current element"s font size). In the absence of these metrics, the "Ascent" and "Descent" metrics from the HHEA table should be used.

字体的 A 和 D 两部分是根据 OS/2 表中 sTypoAscender 和 sTypoDescender 或者 HHEA 表中的 Ascent 和 Descent 来计算的. 下面用了一个工具来计算字体的这四个属性:

const { Font } = require("fonteditor-core");
const { readFileSync } = require("fs");

function info(font) {
    if (/.(ttf|otf|woff|eot)$/.test(font)) {
        const type = RegExp.$1;
        const buffer = readFileSync(font);
        const data = Font.create(buffer, { type }).get();
        console.log(`x1b[41mx1b[37m[${font}] informationx1b[0m`);
        [
            "OS/2.sTypoAscender",
            "OS/2.sTypoDescender",
            "hhea.ascent",
            "hhea.descent"
        ].forEach(function log(property) {
            const [ prop1, prop2 ] = property.split(".");
            console.log(`x1b[32m${property}:x1b[0m   ${data[prop1][prop2]}`);
        });
    } else {
        throw new Error("Unknown font type!");
    }
}

从 IconFont.CN 下载下来的字体有一个基线设置, 通过定义一个能兼容绝大部分中文字体的基线来使得保持图标和文字的对齐. 具体信息可以看这里.

我所用的工具 svgicons2svgfont -> svg2ttf -> fonteditor-core 这个流程走下来, 所设定的基线和下端部是重合的, 使得图标的表现类似于一张图片. 工具生成的这种吧, 能够把图标当作图片处理, 有时候比对齐两个未知字体来的方便.

至于大小问题, ICONFONT 的大小通过 font-size 控制. font-size 大小决定了 ICONFONT 的 EM 盒的大小(等比于 SVG 文件的 viewBox). 所以如果 SVG 图标里的路径没有撑满画布, 那渲染出来的字体从视觉上也不会严格等于 font-size.

总结: 明确 ICONFONT 的基线和大小是熟练运用 ICONFONT 布局的基础. 之前对这块没有作细节性研究, 所以 ICONFONT 在项目里用的不多. 经过此番探索, 终于又有了一个新的选择.

GPU云服务器云服务器 html&ltbr&gt和 iconfont iconfont cdn iconfont使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116620.html

【CSS练习】IT修真院--练习5-护工个人界面

摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺任务五、一个最常见的移动端页面完成的事情 float学习张鑫旭《CSS世界》相关章节张鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 评论0 收藏0
CSS > 行内格式化上下文中的各种高度计算

摘要：行内级元素生成行内级盒，而这些盒会参与行内格式化上下文。行盒在行内格式化上下文中，盒从包含块的顶部一个接一个地水平摆放。我们进入下一个话题，行盒高度计算。整个行盒的高度即盒上边缘到盒下边缘。前言碎碎语：标题问题在昨天困扰了笔者很久很久，早上把问题提到了各网络也暂时没有回复。因为明天要早起飞异地参加一场校招面试，笔者还是很紧张的，但奈何问题不解决寝食难安……所以还是卯起劲重新思考这个问...

yearsj 2019-08-28 18:20 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

LancerComet 2019-08-30 15:56 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

netScorpion 2019-08-02 14:33 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

MorePainMoreGain 2019-08-26 18:18 评论0 收藏0