CSS > ICONFONT 基線和大小問題

殘陽映楓紅發表於2017-09-27
CSS

根據 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 在專案裡用的不多. 經過此番探索, 終於又有了一個新的選擇.

相關文章