• <tbody id="9je1r"></tbody><tbody id="9je1r"><acronym id="9je1r"><rp id="9je1r"></rp></acronym></tbody>
      • <acronym id="9je1r"><acronym id="9je1r"><rp id="9je1r"></rp></acronym></acronym>

        亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

        如何在div里選擇字體(font-family)

        2017/2/24 8:32:53   閱讀:3828    發(fā)布者:3828

        大家都知道,在不同操作系統(tǒng)、不同游覽器里面默認(rèn)顯示的字體是不一樣的,
        并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡相同,那么如何設(shè)置字體
        顯示效果會(huì)比較好呢?下面我們逐步的分析一下:

        一、首先我們看看各平臺(tái)的默認(rèn)字體情況

        1、Window下:
        • 宋體(SimSun):Win下大部分游覽器的默認(rèn)字體,
          宋體在小字號(hào)下(如12px、14px)的顯示效果還可以接受,
          但是字號(hào)一大就非常糟糕了,所以使用的時(shí)候要注意。

        • 微軟雅黑("Microsoft Yahei"):從 Vista 開始,微軟提供了這款新的字體,
          一款無(wú)襯線的黑體類字體,并且擁有 RegularBold 
          兩種粗細(xì)的字重,顯著提高了字體的顯示效果。現(xiàn)在這款字體已經(jīng)成為Windows
          游覽器中最值得使用的中文字體。從Win8開始,微軟雅黑又加入了 Light 
          這款更細(xì)的字重,對(duì)于喜歡細(xì)字體的設(shè)計(jì)、開發(fā)人員又多了一個(gè)新的選擇。

        • Arial:Win平臺(tái)上默認(rèn)的無(wú)襯線西文字體(為什么要說英文字體后面會(huì)解釋),
          有多種變體,顯示效果一般。

        • Tahoma:十分常見的無(wú)襯線字體,被采用為Windows 2000、
          Windows XP、Windows Server 2003及Sega游戲主機(jī)Dreamcast等系統(tǒng)的
          預(yù)設(shè)字型,顯示效果比Arial要好。

        • Verdana:無(wú)襯線字體,優(yōu)點(diǎn)在于它在小字上仍結(jié)構(gòu)清晰端整、閱讀辨識(shí)容易。

        • 其他:Windows 下默認(rèn)字體列表:微軟官網(wǎng)、維基百科、Office字體

        • 結(jié)論:微軟雅黑為Win平臺(tái)上最值得選擇的中文字體,但非游覽器默認(rèn),需要設(shè)置;
          西文字體的選擇以Arial、Tahoma等無(wú)襯線字體為主。

        2、Mac OS下:
        • 華文黑體(STHeiti)、華文細(xì)黑(STXihei):屬于同一字體家族系列,
          OS X 10.6 之前的簡(jiǎn)體中文系統(tǒng)界面默認(rèn)字體,也是目前Chrome游覽器下的默認(rèn)字體,
          有 Regular 和 Bold兩個(gè)字重,顯示效果可以接受,華文細(xì)黑也曾是我最喜歡的字體之一。

        • 黑體-簡(jiǎn)(Heiti SC):從 10.6 開始,黑體-簡(jiǎn)代替華文黑體用作簡(jiǎn)體中文系統(tǒng)界面默認(rèn)字體,
          蘋果生態(tài)最常用的字體之一,包括iPhone、iPad等設(shè)備用的也是這款字體,顯示效果不錯(cuò),
          但是喇叭口設(shè)計(jì)遭人詬病。

        • 冬青黑體( Hiragino Sans GB ):聽說又叫蘋果麗黑,日文字體Hiragino KakuGothic的
          簡(jiǎn)體中文版,簡(jiǎn)體中文有 常規(guī)體 和 粗體 兩種,冬青黑體是一款清新的專業(yè)印刷字體,
          小字號(hào)時(shí)足夠清晰,擁有很多人的追捧。

        • Times New Roman:Mac平臺(tái)Safari下默認(rèn)的字體,是最常見且廣為人知的
          西文襯線字體之一,眾多網(wǎng)頁(yè)瀏覽器和文字處理軟件都是用它作為默認(rèn)字體。

        • Helvetica、Helvetica Neue:一種被廣泛使用的傳奇般的西文字體
          ,在微軟使用山寨貨的Arial時(shí),喬布斯卻花費(fèi)重金獲得了Helvetica
          蘋果系統(tǒng)上的使用權(quán),因此該字體也一直伴隨著蘋果用戶,
          是蘋果生態(tài)中最常用的西文字體。Helvetica Neue為Helvetica的改善版本,
          且增加了更多不同粗細(xì)與寬度的字形,共擁有51種字體版本,
          極大的滿足了日常的使用。

        • 蘋方(PingFang SC):在Mac OS X EL Capitan上,蘋果為中國(guó)用戶打造了
          一款全新中文字體--蘋方,去掉了為人詬病的喇叭口,整體造型看上去更加簡(jiǎn)潔,
          字族共六枚字體:極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體

        • San Francisco:同樣是Mac OS X EL Capitan上最新發(fā)布的西文字體,
          感覺和Helvetica看上去差別不大,目前已經(jīng)應(yīng)用在
          Mac OS 10.11+、iOS 9.0+、watch OS等最新系統(tǒng)上。

        • 其他:Mac下默認(rèn)字體列表:蘋果官網(wǎng)、維基百科

        • 結(jié)論:目前蘋方和San Francisco為蘋果推出的最新字體,顯示效果也最為優(yōu)雅,
          但只有最新系統(tǒng)才能支持,而黑體-簡(jiǎn)和Helvetica可以獲得更多系統(tǒng)版本支持,
          顯示效果也相差無(wú)幾,可以接受。

        3、Android系統(tǒng):
        • Droid Sans、Droid Sans Fallback:Droid Sans為安卓系統(tǒng)中默認(rèn)的西文字體,
          是一款人文主義無(wú)襯線字體,而Droid Sans Fallback則是包含漢字、日文假名、
          韓文的文字?jǐn)U展支持。

        • 結(jié)論:Droid Sans為默認(rèn)的字體,并結(jié)合了中英文,無(wú)需單獨(dú)設(shè)置。

        4、iOS系統(tǒng):
        • iOS系統(tǒng)的字體和Mac OS系統(tǒng)的字體相同,保證了Mac上的字體效果,
          iOS設(shè)備就沒有太大問題。

        5、Linux:
        • 文泉驛點(diǎn)陣宋體:類似宋體的襯線字體,一般不推薦使用。

        • 文泉驛微米黑:幾乎是 Linux 社區(qū)現(xiàn)有的最佳簡(jiǎn)體中文字體。

        二、選擇字體需要注意的問題

        1、字體的中英文寫法:

        我們?cè)诓僮飨到y(tǒng)中常常看到宋體、微軟雅黑這樣的字體名稱,但實(shí)際上
        這只是字體的顯示名稱,而不是字體文件的名稱,一般字體文件都是用英文命名的,
        如SimSun、Microsoft Yahei。在大多數(shù)情況下直接
        使用顯示名稱也能正確的顯示,但是有一些用戶的特殊設(shè)置會(huì)導(dǎo)致中文聲明無(wú)效。
        因此,保守的做法是使用字體的字體名稱(英文)或者兩者兼寫。如下示例:

        font-family: STXihei, "Microsoft YaHei"; 
        font-family: STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑";
        2、聲明英文字體:

        絕大部分中文字體里都包含英文字母和數(shù)字,不進(jìn)行英文字體聲明是沒有問題的,
        但是大多數(shù)中文字體中的英文和數(shù)字的部分都不是特別漂亮,所以建議也對(duì)
        英文字體進(jìn)行聲明。 由于英文字體中大多不包含中文,
        我們可以先進(jìn)行英文字體的聲明,這樣不會(huì)影響到中文字體的選擇,
        因此優(yōu)先使用最優(yōu)秀的英文字體,中文字體聲明則緊隨其次。
        如下示例:

        font-family: Arial, "Microsoft YaHei";
        3、照顧不同的操作系統(tǒng):
        • 英文、數(shù)字部分:在默認(rèn)的操作系統(tǒng)中,Mac和Win都會(huì)帶有Arial, 
          Verdana, Tahoma等幾個(gè)預(yù)裝字體,從顯示效果來(lái)看,Tahoma要
          比Arial更加清晰一些,因此字體設(shè)置Tahoma最好放到前面,
          當(dāng)找不到Tahoma時(shí)再使用Arial;而在Mac中,還擁有一款更加漂亮的Helvetica字體,
          所以為了照顧Mac用戶有更好的體驗(yàn),應(yīng)該更優(yōu)先設(shè)置Helvetica字體;
          Android系統(tǒng)下默認(rèn)的無(wú)襯線字體就可以接受,因此無(wú)需單獨(dú)設(shè)置。
          最后,英文、數(shù)字字體的最佳寫法如下:

        font-family: Helvetica, Tahoma, Arial;
        • 中文部分:在Win下,微軟雅黑為大部分人最常使用的中文字體,
          由于很多人安裝Office的緣故,Mac電腦中也會(huì)出現(xiàn)微軟雅黑字體,
          因此把顯示效果不錯(cuò)的微軟雅黑加入到字體列表是個(gè)不錯(cuò)的選擇;
          同樣,為了保證Mac中更為優(yōu)雅字體蘋方(PingFang SC)、黑體-簡(jiǎn)(Heiti SC)、
          冬青黑體( Hiragino Sans GB )的優(yōu)先顯示,
          需要把這些字體放到中文字體列表的最前面;同時(shí)為了照顧到Linux操作系統(tǒng)的體驗(yàn),
          還需要添加文泉驛微米黑字體。最后,中文字體部分最佳寫法如下:

        font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", 
        "Microsoft YaHei", "WenQuanYi Micro Hei";

        中英文整合寫法:

        font-family: Helvetica, Tahoma, Arial, "Heiti SC", 
        "Microsoft YaHei", "WenQuanYi Micro Hei";
        font-family: Helvetica, Tahoma, Arial, "PingFang SC",
        "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
        4、注意向下兼容

        如果還需要考慮舊版本操作系統(tǒng)用戶的話,不得不加上一些舊版
        操作系統(tǒng)存在的字體:Mac中的華文黑體、冬青黑體,Win中的黑體等。
        同樣按照顯示效果排列在列表后面,寫法如下:

        font-family: Helvetica, Tahoma, Arial, "PingFang SC", 
        "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei",
        SimHei, "WenQuanYi Micro Hei";

        加入了 STXihei(華文細(xì)黑)和 SimHei(黑體)。

        5、補(bǔ)充字體族名稱

        字體族大體上分為兩類:sans-serif(無(wú)襯線體)和serif(襯線體),
        當(dāng)所有的字體都找不到時(shí),我們可以使用字體族名稱作為操作系統(tǒng)最后選擇字體的方向。
        一般非襯線字體在顯示器中的顯示效果會(huì)比較好,因此我們需要在
        最后添加 sans-serif,寫法如下:

        font-family: Helvetica, Tahoma, Arial, "PingFang SC", 
        "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
        "WenQuanYi Micro Hei", sans-serif;

        三、我們看一下大公司的常見寫法(2016.07查看)

        1、小米
        font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,
        "Microsoft Yahei","Hiragino Sans GB","Heiti SC",
        "WenQuanYi Micro Hei",sans-serif;

        小米公司優(yōu)先使用Helvetica Neue這款字體以保證最新版本Mac用戶的最佳體驗(yàn),
        選擇了Arial作為Win下默認(rèn)英文字體及Mac的替代英文字體;中文字體方面首
        選了微軟雅黑,然后選擇了冬青黑體及黑體-簡(jiǎn)作為Mac上的替代方案;
        最后使用文泉驛微米黑兼顧了Linux系統(tǒng)。

        2、淘寶
        font: 12px/1.5 tahoma,arial,’Hiragino Sans GB’,’\5b8b\4f53’,sans-serif;

        其實(shí)從圖中明顯看出淘寶網(wǎng)的導(dǎo)航及內(nèi)容有著大量的襯線字體,
        鑒于淘寶網(wǎng)站大部分字號(hào)比較小,顯示效果也還可以接受。代碼中可以看出淘寶使用了
        Tahoma、Arial作為首選英文字體,中文字體首選了冬青黑體,
        由于Win下沒有預(yù)裝該款字體,所以顯示出了后面的宋體(5b8b4f53為漢字宋體用
        unicode 表示的寫法,不用SimSun是因?yàn)?Firefox 的某些版本和 Opera
        不支持 SimSun的寫法)

        3、簡(jiǎn)書
        font-family: "lucida grande", "lucida sans unicode", 
        lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei",
        "WenQuanYi Micro Hei", sans-serif;

        自認(rèn)為簡(jiǎn)書的閱讀體驗(yàn)很棒,我們看看簡(jiǎn)書所用的字體,
        簡(jiǎn)書優(yōu)先選擇了lucida家族的系列字體作為英文字體,
        該系列字體在Mac和Win上都是預(yù)裝的,并且有著不俗的表現(xiàn);
        中文字體方面將冬青黑體作為最優(yōu)先使用的字體,同樣考慮了Linux系統(tǒng)。

        各大公司的字體設(shè)置大同小異,這里不再一一舉例查看,
        有興趣的可以自己多多查看。

        四、其他的一些注意點(diǎn)

        1、字體何時(shí)需要添加引號(hào)

        當(dāng)字體具體某個(gè)取值中若有一種樣式名稱包含空格,
        則需要用雙引號(hào)或單引號(hào)表示,如:

        font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

        如果書寫中文字體名稱為了保證兼容性也會(huì)添加引號(hào),如:

        font-family: "黑體-簡(jiǎn)", "微軟雅黑", "文泉驛微米黑";
        2、引用外部字體

        大多數(shù)的中文字體由于版權(quán)原因不能隨意使用,這里推薦一個(gè)免版權(quán)
        而且漂亮的中文字體思源黑體,該字體為Adobe與Google推出的一款開源字體,
        有七種字體粗細(xì)(ExtraLight、Light、Normal、Regular、
        Medium、Bold 和 Heavy)
        ,完全支持日文、韓文、繁體中文和簡(jiǎn)體中文,
        字形優(yōu)美,依稀記得小米公司好像有使用過。
        鑒于中文字體的體積比較大(一般字庫(kù)全一點(diǎn)的中文字體動(dòng)輒幾Mb),
        所以較少人會(huì)使用外部字體,如果真的需要引入,也可以考慮通過工具根據(jù)頁(yè)面文字的使
        用多少單獨(dú)生成中文字體,以減小文件大小。

        五、最后,推薦寫法

        由于每個(gè)人的審美不一樣,鐘愛的字體也會(huì)有所有不同,這里給出我個(gè)人的常用寫法:

        font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", 
        "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
        "WenQuanYi Micro Hei", sans-serif;

         

        亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999
            • <tbody id="9je1r"></tbody><tbody id="9je1r"><acronym id="9je1r"><rp id="9je1r"></rp></acronym></tbody>
              <acronym id="9je1r"><acronym id="9je1r"><rp id="9je1r"></rp></acronym></acronym>

              辰溪县| 林西县| 衡东县| 洛阳市| 玛多县| 公安县| 天门市| 瓦房店市| 自治县| 潞城市| 广平县| 怀来县| 民和| 呼玛县| 武汉市| 新源县| 兰坪| 福贡县| 沙河市| 房产| 诸城市| 青川县| 平昌县| 屯昌县| 塔城市| 桦甸市| 肇州县| 离岛区| 广汉市| 太白县| 武川县| 孙吴县| 辽宁省| 曲阜市| 阿图什市| 游戏| 新营市| 青河县| 巴林左旗| 淮南市| 道真|