CSS 那些你必須知道的知識 (字型,Auto)

2021-09-29 00:12:08 字數 1774 閱讀 9196

對於前端開發,或許流暢是最需要關注的問題,但是美觀也是你需要關注的一部分,包括移動端等適配,這部分實現的基石便是css技術。

字型可能是前端萌新們最容易忽略的一點,平時寫網頁的時候就覺得找適合自己的個性化的字型就好啦,然而發現在別人電腦上你的網頁顯示的樣子和你想得完全不一樣。這時候你開始懷疑一切似乎沒那麼簡單,於是你開始學會了@font-face,於是你知道了去看別人**的font-family是怎麼寫的。

上面說的就是我關於字型的辛酸歷程,今天看了一篇優秀的博文,才意識到字型這個被我忽視了很久的問題是需要我們認真了解的。

關於字型分類,這裡我們簡單的說,其實就是分為襯線(serif)和無襯線(sans-serif)兩類,其實除此之外還有別的,比如我們編輯器裡經常使用的等寬字型,fira code或者微軟最新的隨著wt一起推出的cascadia code,一般在我們技術文章的**塊中,這種字型會佔一席之地。

關於襯線字型,最熟知的可能是宋體和新羅馬,但是注意宋體在大字型大小的表現效果並不好,一般不要這樣用。

關於非襯線字型,windows平台下最出名的就是雅黑了,mac稍微多一點比如華文黑體,冬青黑體等。

關於引號,我們最好把有空格,中文,或者unicode編碼的字型都加上引號,防止識別的時候出錯。

接著就是說到正題了,對於font-family這個屬性,很多人都不知道為什麼是family,很好理解,因為我們的字型在不同系統,甚至不同型號的電腦上都可能是不一樣的,一種字型當然無法滿足所有的要求,拿**首頁的font-family舉例:

.all

使用 tahoma 作為首選的西文字型,小字號下結構清晰端整、閱讀辨識容易;

使用者電腦未預裝 tohoma,則選擇 arial 作為替代的西文字型,覆蓋 windows 和 mac os;

hiragino sans gb 為冬青黑體,首選的中文字型,保證了 mac 使用者的**體驗;

windows 下沒有預裝冬青黑體,則使用 『\5b8b\4f53』 宋體為替代的中文字型方案,小字號下有著不錯的效果;

最後使用無襯線系列字型 sans-serif 結尾,保證舊版本作業系統使用者能選中一款電腦預裝的無襯線字型,向下相容。

( 該分析來自(作者(chokcoco))

同時我們選擇的時候也要注意,一定考慮到中西結合,英文在前(不會影響中文),mac字型在前(mac中文可能在win中沒有),最後以sans-serif結尾,保證非襯線字型在比較低階系統中也可以比較好的顯示。

首先是system-ui,自適應我們系統的預設優先順序字型;後面兩個為了mac中一些低版本的情況做了相容;segoe ui,為了windows的字型做適配;roboto,面向 android 和一些新版的的 chrome os;中間的一行是為了低版本做適配的,最後的一行同上面**首頁的字型分析。

雖說不一定這樣就是最好的,但一般情況下比較推薦大家使用。

為什麼要記錄auto呢,因為這個非常常見的東西我很少用,看,我連怎麼稱呼它都不知道,在margin或者padding中,這個還是很常用的,簡單的說我們實現水平垂直居中這個老掉牙的問題的最簡單的方法就是用margin: auto;

當然,傳統的dispaly: block; 是沒法實現垂直居中的,只能實現水平居中,我們要把布局換成flex, grid之類的布局。

在flex布局中,我們常用的space-between也可以使用auto來實現,可以看到auto的一些功能也是在flex或者grid布局中得到更加直觀的展現的,這裡紀錄一下auto主要是看到這個出現的時候不要太陌生,它實現的東西其實是很容易看出來的。

那些你必須知道的常用註解

public class testserviceimpl qualifier autowired是根據型別進行自動裝配的。如果當spring上下文中存在多個userdao型別的bean時,就會丟擲beancreationexception異常 如果spring上下文中不存在userdao型別的bea...

那些你必須知道的Git乾貨

git本地有三個工作區,再加上遠端的git倉庫共有四個工作區 列出所有本地分支 git branch 列出所有遠端分支 git branch r 新建乙個分支,但依然停留在當前分支 git branch branch name 合併指定分支到當前分支 git merge branch name 切換...

關於Tomcat,你必須知道的那些事兒

1.如何修改tomcat的埠號?答 在conf的server.xml中 找到 的地方,修改port引數即可。2.如何配置虛擬目錄?path 表示虛擬目錄名,訪問時使用虛擬目錄名作為web目錄訪問 docbase 表示實際專案的磁碟位置。reloadable 3.如何部署web應用?其中通過瀏覽器訪問...