css 字型設定 不同瀏覽器設定效果

2022-09-25 16:00:14 字數 1511 閱讀 1433

乍一聽css字型設定很容易,其實真做起來不然。我們工程師使用原力,他們在不同瀏覽器調整字型的大小知道的得到合適的結果。實際上有一點深入的理解就能起到很大的作用。

font-size 屬性:

font-size屬性可以被設定給任何乙個html標籤,即使是不能包含文字的標籤也可以設定它,比如:

。可以被賦值是各種各樣滴,比如:絕對,相對,長度值

乙個元素的font-size屬性會自動繼承它父節點元素的font-size屬性值,除非你覆蓋了它。當你給font-size設定相對大小的時候這一點很重要。

font-size 設定的絕對關鍵字:

以下幾個絕對字型大小的設定是有效的。當然他們是瀏覽器預定義設定的。給元素指定了絕對關鍵字font-size的時候,該元素就不會繼承父元素的字型大小

儘管大多數的瀏覽器支援上面的關鍵字,但是他們的精確的大小是不相同滴。

font-size的絕對大小:

fone-size能被設定成下面得絕對大小:

一般說來上面得這些度量單位都有些問題

比如:公釐,厘公尺,英吋是對於不同**介質是不精確地,由於解析度的設定不同,pt和pc就是相對不可靠地。pix來起來是最合適的,但是它能導致一些輔助性問題:ie下不能重新調整字型的大小。

相對大小:font-size屬效能被設定成相對于父節點的字型大小的相對大小。

很少的開發者使用ex ,實際上某些情況下ex還是相當好用的,比如當你需要更精確的字型的大小的時候,1ex要比0.525em更好,更精確。

%和em的值是等價的,比如:www.cppcns.com50% = 0.5em, 100% = 1em, 120% = 1.2em等等,

儘管會有很少的一些瀏覽器有些微妙的差別,但是畢竟那是很少見的問題。如果你想要儲存更小的位元組,就需要用更短的名字去定義font-size的值。比如:50%要比0.5em占用位元組少,1em要比100%占用的位元組少。

文字字型的大小和頁面放縮。

這是附加複雜深入部分,大多數瀏覽器允許使用者在瀏覽器中做如下操作:

1.增加或減少基本字型大小(除外)

2.頁面放縮是所有的文字和也相應發生放縮變化。

3.不但允許字型放縮,而且還允許頁面放縮

備註(深入理解):在ie中如果頁面中的元素的字型被用px(畫素)賦值了,那麼該元素的字型在頁面放縮的時候不會發生變化。

如果您是有印刷行業背景的設計師將要轉移到web設計,那就建議您不要給予使用者過多的權利否則他們會打亂您的設計作品。您的設計作品被放大到200%的時候,或者字型減少至50%,就會被破壞掉。

css font-size 設定建議(規範)

一般來說,大多數情況下使用em或者%,這樣字型就能被瀏覽器用更精細比例的字型支援。我個人建議使用百分比%來定義font-size大小,這種做法在一些老的瀏覽器中支援的也會更好。

1. 在testing之前,重置所有瀏覽器的字型的大小。

2.盡量合理的定義字型的大小,以便於在頁面放縮的時候頁面仍然保持良好的可讀性。

本文標題: css 字型設定(不同瀏覽器設定效果)

本文位址: /web/css/28285.html

css顏色漸變在不同瀏覽器的設定

在web開發中,難免會遇到瀏覽器之間的相容問題,關於css設定顏色漸變下面有解決的辦法,直接上 適用於谷歌瀏覽器 background webkit gradient linear,0 0,0 100 from 4285fa to 366dcb from 是指漸變起始顏色 to 是指漸變結束的顏色 ...

隨筆target事件和設定瀏覽器字型

event.target返回觸發事件的元素 event.currenttarget返回繫結事件的元素 谷歌預設的最小字型是12px,但是通常由於頁面的需求我們需要使用更小的字型,解決方法如下 使用transform.scale 屬性,需加上谷歌字首 webkit out 注意 sacle 只會縮放給...

通過css 設定 谷歌瀏覽器 字型小於 12px

哎 那個奇葩 提出來的這個需求 設定個 10px 使用者還不趴在電腦上 看 其實吧 谷歌 預設設定 最小字型就是 12px 預設是 16px 就算你通過 font size 設定 10px 但是 谷歌上是不生效的 看到的還是 12px 但是 在ie上是可以設定成功了 第一次 感覺 ie 還是 不錯的...