課程
/前端開發
/JavaScript
/JavaScript入門篇
font 的怎么使用?
2016-11-03
源自:JavaScript入門篇 3-4
正在回答
font是對字體屬性的設置,如font-size
果果zzl 提問者
font-family: sans-serif。 這行代碼設置所有字體為系統默認的無稱線字體。如果在各種操作系統和瀏覽器都做對的情況下,它應該對中英文使用默認的無稱線字體。即大多數情況下英文顯示『Arial』或『Helvatica』,中文顯示『黑體』或『微軟雅黑』,日文顯示『哥特體』。當然,也可以設置font-family: serif。那么相應的就是『Times』、『宋體』和『明朝』。很可惜這項設置只能在Mac和Windows8下正確顯示。在其它Windows下其實是無效的。原因如下:除了Win8以外的Windows都會錯誤地使用宋體(稱線字體)顯示。(其實也沒問題,只是那些想用雅黑顯示的網頁就沒戲了)Windows XP及以前的操作系統上黑體顯示的中文字非常難看不便閱讀。----------------------分析開始之前----------------------為了使問題簡化,在此就討論的條件和范圍說明一下:注1:貌似某些新版本的瀏覽器能夠在Windows上正確分辨中文的稱線和無稱線字體了。注3:不討論Windows和Mac以外的操作系統了。注4:不討論一個網頁內標題和正文使用不同中文字體的情況。注5:不討論中文、日文和拉丁字母以外的字符。注6:不討論用戶在瀏覽器的設置中中強行設置字體的情況。注7:不討論稱線和無稱線字體以外的情況,如等寬字體。(因為對中文實際使無效的)----------------------分析開始----------------------在給出答案前,先說各種字體的在各種操作系統上現象:宋體:在Windows操作系統上顯示良好。但是僅限于12像素和14像素。超出14像素的字基本就會出現字不夠方正,鋸齒明顯的現象。在Mac上各種字號都可以很好的顯示。這是因為Mac上針對字體所做的反鋸齒效果做的比較好。黑體或微軟雅黑:黑體和微軟雅黑都屬于無稱線字體。Windows Vista,Windows 7和Windows 8上在各種字號下顯示良好。但是僅就閱讀來售,雅黑在Windows下不大適合做大段閱讀,因為會出現明顯的字體歪歪扭扭的現象。雅黑比較適合做UI字體,比如按鈕、導航、菜單。大號字體下用以顯示標題也不錯。因此我們看到很多新網站都開始使用雅黑了。Mac:黑體沒有任何問題。雖然有些人號稱看蘋果上的黑體字很不習慣。但是個人覺得還是最適合閱讀的字體。而且也適合做UI字體。Windows XP及以前的Windows:這里就比較復雜了。因為:1) Windows XP原生是不帶微軟雅黑的。2) 加裝Office 2007后會加裝微軟雅黑。3) Windows XP的Clear Type做的非常不好,導致雅黑在Windows XP上的顯示效果基本無法閱讀。(如下面對點點網的截屏)所以,很多網站所喜歡的 把雅黑設置為第一順位的做法就出問題了,font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; 它會導致:網站在裝了Office 2007+的Windows XP基本屬于不可用狀態(如上面對點點網的截屏)。裝了Office的Mac上顯示為雅黑(而不是Mac上顯示效果最佳的黑體)。----------------------我的答案----------------------說是『我的答案』,因為實際上使用 font-family: sans-serif; 已經能解決所有的兼容性問題了。唯一的缺憾是在目前的條件下,無法使用微軟雅黑。為了發揮雅黑的好處,同時解決兼容性問題,我在服務器端針對各種不同的操作系統做了不同的判斷。如下:Windows XP及以前版本的Windowsfont-family: Arial, 宋體, sans-serif; Windows Vista和Windows 7font-family: 'Microsoft Yahei', sans-serif; Sorry,英文就無法設置字體了,因為中文字體都包含了英文字體。好在雅黑顯示英文還湊合。Mac及其它操作系統font-family: sans-serif; 其實這還不夠好,因為在Windows下,正文使用宋體顯示比較合適。我的下一步的計劃是:針對Windows下的正文使用宋體。
舉報
JavaScript做為一名Web工程師的必備技術,本教程讓您快速入門
2 回答font怎么用,求指教;
2 回答怎么使用變量
2 回答設置font-size font-family
1 回答答案中的set什么意思?怎么使用?
1 回答代碼快照怎么使用啊。。。。
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-03
font是對字體屬性的設置,如font-size
2016-11-03
font-family: sans-serif。 這行代碼設置所有字體為系統默認的無稱線字體。如果在各種操作系統和瀏覽器都做對的情況下,它應該對中英文使用默認的無稱線字體。即大多數情況下英文顯示『Arial』或『Helvatica』,中文顯示『黑體』或『微軟雅黑』,日文顯示『哥特體』。當然,也可以設置font-family: serif。那么相應的就是『Times』、『宋體』和『明朝』。
很可惜這項設置只能在Mac和Windows8下正確顯示。在其它Windows下其實是無效的。原因如下:除了Win8以外的Windows都會錯誤地使用宋體(稱線字體)顯示。(其實也沒問題,只是那些想用雅黑顯示的網頁就沒戲了)Windows XP及以前的操作系統上黑體顯示的中文字非常難看不便閱讀。
----------------------分析開始之前----------------------
為了使問題簡化,在此就討論的條件和范圍說明一下:
注1:貌似某些新版本的瀏覽器能夠在Windows上正確分辨中文的稱線和無稱線字體了。
注3:不討論Windows和Mac以外的操作系統了。
注4:不討論一個網頁內標題和正文使用不同中文字體的情況。
注5:不討論中文、日文和拉丁字母以外的字符。
注6:不討論用戶在瀏覽器的設置中中強行設置字體的情況。
注7:不討論稱線和無稱線字體以外的情況,如等寬字體。(因為對中文實際使無效的)
----------------------分析開始----------------------
在給出答案前,先說各種字體的在各種操作系統上現象:
宋體:在Windows操作系統上顯示良好。但是僅限于12像素和14像素。超出14像素的字基本就會出現字不夠方正,鋸齒明顯的現象。在Mac上各種字號都可以很好的顯示。這是因為Mac上針對字體所做的反鋸齒效果做的比較好。黑體或微軟雅黑:黑體和微軟雅黑都屬于無稱線字體。Windows Vista,Windows 7和Windows 8上在各種字號下顯示良好。但是僅就閱讀來售,雅黑在Windows下不大適合做大段閱讀,因為會出現明顯的字體歪歪扭扭的現象。雅黑比較適合做UI字體,比如按鈕、導航、菜單。大號字體下用以顯示標題也不錯。因此我們看到很多新網站都開始使用雅黑了。Mac:黑體沒有任何問題。雖然有些人號稱看蘋果上的黑體字很不習慣。但是個人覺得還是最適合閱讀的字體。而且也適合做UI字體。
Windows XP及以前的Windows:這里就比較復雜了。因為:
1) Windows XP原生是不帶微軟雅黑的。
2) 加裝Office 2007后會加裝微軟雅黑。
3) Windows XP的Clear Type做的非常不好,導致雅黑在Windows XP上的顯示效果基本無法閱讀。(如下面對點點網的截屏)
所以,很多網站所喜歡的 把雅黑設置為第一順位的做法就出問題了,
font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; 它會導致:
網站在裝了Office 2007+的Windows XP基本屬于不可用狀態(如上面對點點網的截屏)。裝了Office的Mac上顯示為雅黑(而不是Mac上顯示效果最佳的黑體)。----------------------我的答案----------------------
說是『我的答案』,因為實際上使用 font-family: sans-serif; 已經能解決所有的兼容性問題了。唯一的缺憾是在目前的條件下,無法使用微軟雅黑。
為了發揮雅黑的好處,同時解決兼容性問題,我在服務器端針對各種不同的操作系統做了不同的判斷。如下:Windows XP及以前版本的Windows
font-family: Arial, 宋體, sans-serif; Windows Vista和Windows 7
font-family: 'Microsoft Yahei', sans-serif; Sorry,英文就無法設置字體了,因為中文字體都包含了英文字體。好在雅黑顯示英文還湊合。
Mac及其它操作系統
font-family: sans-serif; 其實這還不夠好,因為在Windows下,正文使用宋體顯示比較合適。我的下一步的計劃是:針對Windows下的正文使用宋體。