CSS > ICONFONT 基線和大小問題

根據 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[41m\x1b[37m[${font}] information\x1b[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 在項目裏用的很少. 通過此番探索, 終於又有了一個新的選擇.