摘要:根據(jù)標(biāo)準(zhǔn)字體的和兩部分是根據(jù)表中和或者表中的和來計算的下面用了一個工具來計算字體的這四個屬性從下載下來的字體有一個基線設(shè)置通過定義一個能兼容絕大部分中文字體的基線來使得保持圖標(biāo)和文字的對齊具體信息可以看這里我所用的工具這個流程走下來
根據(jù) W3C 標(biāo)準(zhǔn):
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 兩部分是根據(jù) 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 下載下來的字體有一個基線設(shè)置, 通過定義一個能兼容絕大部分中文字體的基線來使得保持圖標(biāo)和文字的對齊. 具體信息可以看這里.
我所用的工具 svgicons2svgfont -> svg2ttf -> fonteditor-core 這個流程走下來, 所設(shè)定的基線和下端部是重合的, 使得圖標(biāo)的表現(xiàn)類似于一張圖片. 工具生成的這種吧, 能夠把圖標(biāo)當(dāng)作圖片處理, 有時候比對齊兩個未知字體來的方便.
至于大小問題, ICONFONT 的大小通過 font-size 控制. font-size 大小決定了 ICONFONT 的 EM 盒的大小(等比于 SVG 文件的 viewBox). 所以如果 SVG 圖標(biāo)里的路徑?jīng)]有撐滿畫布, 那渲染出來的字體從視覺上也不會嚴(yán)格等于 font-size.
總結(jié): 明確 ICONFONT 的基線和大小是熟練運用 ICONFONT 布局的基礎(chǔ). 之前對這塊沒有作細(xì)節(jié)性研究, 所以 ICONFONT 在項目里用的不多. 經(jīng)過此番探索, 終于又有了一個新的選擇.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/116620.html
摘要:任務(wù)五一個最常見的移動端頁面完成的事情學(xué)習(xí)張鑫旭世界相關(guān)章節(jié)張鑫旭系列了解通配符選擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計劃的事情找時間把前面任務(wù)的官方提供鏈接過一遍,查缺 任務(wù)五、 一個最常見的移動端頁面 完成的事情 float學(xué)習(xí) 張鑫旭《CSS世界》相關(guān)章節(jié) 張鑫旭 float系列 了解CSS通配符 &...
摘要:行內(nèi)級元素生成行內(nèi)級盒,而這些盒會參與行內(nèi)格式化上下文。行盒在行內(nèi)格式化上下文中,盒從包含塊的頂部一個接一個地水平擺放。我們進(jìn)入下一個話題,行盒高度計算。整個行盒的高度即盒上邊緣到盒下邊緣。 前言碎碎語:標(biāo)題問題在昨天困擾了筆者很久很久,早上把問題提到了各網(wǎng)絡(luò)也暫時沒有回復(fù)。因為明天要早起飛異地參加一場校招面試,筆者還是很緊張的,但奈何問題不解決寢食難安……所以還是卯起勁重新思考這個問...
摘要:前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級階段前端培訓(xùn)初級階段后記慣例補上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS...
摘要:前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級階段前端培訓(xùn)初級階段后記慣例補上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS...
摘要:前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級階段前端培訓(xùn)初級階段后記慣例補上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現(xiàn)手淘頁面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS...
閱讀 3154·2021-10-08 10:04
閱讀 1097·2021-09-30 09:48
閱讀 3466·2021-09-22 10:53
閱讀 1683·2021-09-10 11:22
閱讀 1697·2021-09-06 15:00
閱讀 2156·2019-08-30 15:56
閱讀 718·2019-08-30 15:53
閱讀 2288·2019-08-30 13:04