[ASP.NET] 字型單位的轉換

當我們在設計網頁時, 對於文字所使用的寬度多半使用 Pixel 或者 Em 來表示。不過我記得在更早以前是廣泛地採用所謂的 Point; 這是跟印刷息息相關的單位, 但是近來已經不太使用了, 尤其是在網頁設計上...

當我們在設計網頁時, 對於文字所使用的寬度多半使用 Pixel 或者 Em 來表示。不過我記得在更早以前是廣泛地採用所謂的 Point; 這是跟印刷息息相關的單位, 但是近來已經不太使用了, 尤其是在網頁設計上。

若依據我的經驗跟看法, 我認為只有一種單位是真正 Device-independent 的, 那就是 em。如果網頁設計者全部使用 em 來當作文字大小的單位, 那麼網頁中所有文字的大小就不會因客戶端設備不同而忽大忽小。不過, 很可惜的, 由於網際網路的發展歷時數十年, 它所承接的歷史包袱也相對龐大, 所以光是一個文字的長度單位就有很多種, 包括最早期的 Large、Small、Medium, 到 CM (公分)、IN (英吋)、百分比等等, 當然還有許多頑固份子戒不掉的 Pixel 等等。如果你想在這些單位之間做轉換, 你可能會發現 .Net 並不提供這個功能。

怎麼辦? 例如說一個大小 16px 的文字, 到底是幾個 em?

我想, .Net 之所以沒有提供這種轉換, 主要是因為這種轉換並非放諸世界皆準。這中間的差異, 其實跟裝置的 DPI 有著密切的關係。例如印表機和一般螢幕的 DPI 就有很大的差異; 而一般螢幕跟各種不同的手持裝置的 DPI 也有或大或小的差異。DPI 不同, 轉換出來的結果就應該不同。

如果一定要轉的話, 我提供我自己的轉換程式與大家分享:


private float fontUnitToEm(FontUnit fontUnit)
{
    float em = 1.0f;
    if (fontUnit.Type != FontSize.NotSet && fontUnit.Type != FontSize.AsUnit)
    {
        switch (fontUnit.Type)
        {
            case FontSize.XXSmall:
            case FontSize.XSmall:
                em = 0.7f;
                break;
            case FontSize.Smaller:
            case FontSize.Small:
                em = 0.8f;
                break;
            case FontSize.Medium:
                em = 1.0f;
                break;
            case FontSize.Large:
                em = 1.1f;
                break;
            case FontSize.Larger:
                em = 1.2f;
                break;
            case FontSize.XLarge:
                em = 1.5f;
                break;
            case FontSize.XXLarge:
                em = 2.0f;
                break;
            default:
                break;
        }
    }
    else if (fontUnit.Type == FontSize.AsUnit)
    {
        float unitValue = (float)fontUnit.Unit.Value;
        switch (fontUnit.Unit.Type)
        {
            case UnitType.Cm:
                em = unitValue / 0.4f;
                break;
            case UnitType.Em:
                em = unitValue;
                break;
            case UnitType.Ex:
                em = unitValue / 2.2f;
                break;
            case UnitType.Inch:
                em = unitValue / 0.17f;
                break;
            case UnitType.Mm:
                em = unitValue / 4.0f;
                break;
            case UnitType.Percentage:
                em = unitValue / 100;
                break;
            case UnitType.Pica:
                em = unitValue;
                break;
            case UnitType.Pixel:
                em = unitValue / 16;
                break;
            case UnitType.Point:
                em = unitValue / 12;
                break;
            default:
                break;
        }
    }
    return em;
}

基本上, 你必須先取得 WebControl 的文字的 Font.Size 這個型別為 FontUnit 的值, 經由上述程式的轉換, 得到一個單位為 UnitType.Em 的浮點小數值。換句話說, 不管來源是什麼單位, 轉換出來的都會是以 Em 為單位的值。

不過若要使用這個轉換程式的話, 有一個重要的前題必須謹記在心, 那就是我這個程式的各種轉換比例都基於 DPI 為 192 dots per inch 的先決條件。意思是在十吋的寬度上差不多可以塞入 1920 個 pixel。現在的 LCD 螢幕差不多都是這樣的解析度, 彼此間的差異應該不會太大。但是如果你拿去用在印表機或手持裝置(例如 New iPad), 得到的轉換結果就會失真(會偏小)。

因此, 如果你的程式是用在那些比較特別的裝置的話, 程式中的轉換參數就必須自行修改。

 


Dev 2Share @ 點部落