成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS > ICONFONT 基線和大小問(wèn)題

jindong / 772人閱讀

摘要：根據(jù)標(biāo)準(zhǔn)字體的和兩部分是根據(jù)表中和或者表中的和來(lái)計(jì)算的下面用了一個(gè)工具來(lái)計(jì)算字體的這四個(gè)屬性從下載下來(lái)的字體有一個(gè)基線設(shè)置通過(guò)定義一個(gè)能兼容絕大部分中文字體的基線來(lái)使得保持圖標(biāo)和文字的對(duì)齊具體信息可以看這里我所用的工具這個(gè)流程走下來(lái)

根據(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 來(lái)計(jì)算的. 下面用了一個(gè)工具來(lái)計(jì)算字體的這四個(gè)屬性:

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 下載下來(lái)的字體有一個(gè)基線設(shè)置, 通過(guò)定義一個(gè)能兼容絕大部分中文字體的基線來(lái)使得保持圖標(biāo)和文字的對(duì)齊. 具體信息可以看這里.

我所用的工具 svgicons2svgfont -> svg2ttf -> fonteditor-core 這個(gè)流程走下來(lái), 所設(shè)定的基線和下端部是重合的, 使得圖標(biāo)的表現(xiàn)類似于一張圖片. 工具生成的這種吧, 能夠把圖標(biāo)當(dāng)作圖片處理, 有時(shí)候比對(duì)齊兩個(gè)未知字體來(lái)的方便.

至于大小問(wèn)題, ICONFONT 的大小通過(guò) font-size 控制. font-size 大小決定了 ICONFONT 的 EM 盒的大小(等比于 SVG 文件的 viewBox). 所以如果 SVG 圖標(biāo)里的路徑?jīng)]有撐滿畫布, 那渲染出來(lái)的字體從視覺(jué)上也不會(huì)嚴(yán)格等于 font-size.

總結(jié): 明確 ICONFONT 的基線和大小是熟練運(yùn)用 ICONFONT 布局的基礎(chǔ). 之前對(duì)這塊沒(méi)有作細(xì)節(jié)性研究, 所以 ICONFONT 在項(xiàng)目里用的不多. 經(jīng)過(guò)此番探索, 終于又有了一個(gè)新的選擇.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116620.html

相關(guān)文章

  • 【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

    摘要：任務(wù)五一個(gè)最常見的移動(dòng)端頁(yè)面完成的事情學(xué)習(xí)張?chǎng)涡袷澜缦嚓P(guān)章節(jié)張?chǎng)涡裣盗辛私馔ㄅ浞x擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計(jì)劃的事情找時(shí)間把前面任務(wù)的官方提供鏈接過(guò)一遍，查缺 任務(wù)五、 一個(gè)最常見的移動(dòng)端頁(yè)面 完成的事情 float學(xué)習(xí) 張?chǎng)涡瘛禖SS世界》相關(guān)章節(jié) 張?chǎng)涡?float系列 了解CSS通配符 &...

    Jonathan Shieber 評(píng)論0 收藏0

  • CSS > 行內(nèi)格式化上下文中的各種高度計(jì)算

    摘要：行內(nèi)級(jí)元素生成行內(nèi)級(jí)盒，而這些盒會(huì)參與行內(nèi)格式化上下文。行盒在行內(nèi)格式化上下文中，盒從包含塊的頂部一個(gè)接一個(gè)地水平擺放。我們進(jìn)入下一個(gè)話題，行盒高度計(jì)算。整個(gè)行盒的高度即盒上邊緣到盒下邊緣。 前言碎碎語(yǔ)：標(biāo)題問(wèn)題在昨天困擾了筆者很久很久，早上把問(wèn)題提到了各網(wǎng)絡(luò)也暫時(shí)沒(méi)有回復(fù)。因?yàn)槊魈煲缙痫w異地參加一場(chǎng)校招面試，筆者還是很緊張的，但奈何問(wèn)題不解決寢食難安……所以還是卯起勁重新思考這個(gè)問(wèn)...

    yearsj 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁(yè)面的適配布局教程語(yǔ)法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁(yè)面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    LancerComet 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁(yè)面的適配布局教程語(yǔ)法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁(yè)面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    netScorpion 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段（9 -12）

    摘要：前端最基礎(chǔ)的就是。往期內(nèi)容前端培訓(xùn)初級(jí)階段前端培訓(xùn)初級(jí)階段后記慣例補(bǔ)上主講人文章參考資料引用培訓(xùn)目錄出處已備份到筆記字體生成原理及使用技巧查詢?cè)倭囊苿?dòng)端頁(yè)面的適配布局教程語(yǔ)法篇布局教程實(shí)例篇使用實(shí)現(xiàn)手淘頁(yè)面的終端適配 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS...

    MorePainMoreGain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<