CSS > ICONFONT 基線和大小問題

jindong 發布于2019-08-30 15:53 / 703人閱讀

摘要：根據標準字體的和兩部分是根據表中和或者表中的和來計算的下面用了一個工具來計算字體的這四個屬性從下載下來的字體有一個基線設置通過定義一個能兼容絕大部分中文字體的基線來使得保持圖標和文字的對齊具體信息可以看這里我所用的工具這個流程走下來

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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