談談網頁的字體的設置

来源:http://www.cnblogs.com/shouce/archive/2016/01/27/5162077.html
-Advertisement-
Play Games

設置全站的字體一直是一個簡單而又不簡單的事,因為深入下去,這裡面牽扯到太多的東西。本文主要是想說說對於一個普通的網站,如何根據自己的需求選擇字體。1、必備知識首先,我們應該明確,並不是你設置了這種字體,用戶電腦便會以這種字體顯示。如果用戶電腦沒有安裝這種字體,那麼它便會以你設置的第二種字體來渲染。看...


設置全站的字體一直是一個簡單而又不簡單的事,因為深入下去,這裡面牽扯到太多的東西。

本文主要是想說說對於一個普通的網站,如何根據自己的需求選擇字體。      1、必備知識 首先,我們應該明確,並不是你設置了這種字體,用戶電腦便會以這種字體顯示。 如果用戶電腦沒有安裝這種字體,那麼它便會以你設置的第二種字體來渲染。看一個常見設置
font-family:tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif; /* 其中\5b8b\4f53是宋體的意思,用這種Unicode編碼可以相容全部瀏覽器 */
上述的代碼,如果在沒有tahoma字體的機器上設置,那麼該機器會以arial字體渲染。如果也沒有,那麼便用後一種。直到你指定的字體都沒有,那麼便會使用sans-serif字體族中的一款字體。   然後,我們應該講講sans-serif是什麼。 sans-serif是無襯線字體的意思,並不是一種字體,而是一類字體的統稱。 相應的,serif就是用襯線字體的意思。 (解釋下:襯線就是字體上的很小的修飾,具體可以百度,跟本文關係並不大,就不展開講了。)   關於常見字體族,這裡整理下:
  • serif:帶襯線字體。Times New Roman 是預設的 serif 字體,中文字體的話,是宋體、仿宋之類的字體。
  • sans serif:無襯線字體。Arial 是預設的 sans-serif 字體,中文字體中,微軟雅黑、黑體等都是這類字體,英文字體包括Helvetica、Geneva或Verdana等。
  • monospace:等寬字體。這個字體裡面的每個字母都有相同的寬度。通常用於顯示程式代碼等,Courier 是預設的 monospace 字體。而對於中文,每個漢字都是等寬的。
    2、該怎麼設置字體 看過了上面的必備知識,想必對字體有了稍微系統點的認識了。 那麼如何設置網站字體呢? 有人習慣用宋體、arail或者tahoma作為第一字體。但是,這裡面有個很大的問題,對於字型大小大一點的字體(16px以上的),渲染出來是相當的難看。不過我電腦上使用了windows下優化字體的東西,就無法給大家展示了。總之,對於大號字體,用這種的設置挺難看的。   那麼有人說微軟雅黑在字體大的時候挺好看的。全部設置微軟雅黑怎麼樣? 這裡有個很大的問題,雅黑是windows vista才有的,對於占有率為65%+的xp用戶來說,你設置了雅黑等於沒寫。他們還是用宋體啊什麼的渲染的。除了你自我安慰或者應付BOSS(BOSS一般都會趕潮流用windows 7以上)。對大部分用戶來說真的沒用。而且微軟雅黑在渲染12px字體時並沒有宋體它們來得好。   所以,關於如何設置字體,我覺得應該根據實際業務和情況來具體設置。     3、結論 經過上述的分析,我總結了一個我覺得挺好的設置方法   1: 綜合最優 全站字體設置如下
font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
然後對於大的重要的字體(例如導航)使用圖片來處理。因為用圖片後,你就不用糾結用戶是否裝了這個字體的問題了,而且可以做的更漂亮,更多的擴展性與可能性。   2: 性能最好 全站字體還是
font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
然後對於大的字體(這裡就不管重不重要了)。單獨來設置
font-family:Microsoft YaHei;
這種設置可以讓前端省挺多事,不過會有很多xp的用戶會被大號字體給醜到。   3: 最省事方案 直接
font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
或者
font-family:Microsoft YaHei,Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
雖然有可能渲染大字體不漂亮,雖然雅黑渲染小字體不清晰。but,有什麼關係呢。   最後,本文所講都是關於普通國內網站,如果要考慮英文,各個系統等。那麼這裡面可以研究的東西就更多了。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • click是最常見的點擊事件,但是對於移動終端,比如手機,一般都是以touch事件代替的,而click事件在手機也是生效的,只是會有1-2秒左右的延遲,那麼當你想要用click而非touch事件的時候,該如何處理事件綁定的呢,不用說,為了阻止事件冒泡,以及動態載入出來的DOM元素也綁定點擊事件,肯定...
  • 在任何應用程式中,中介者模式隨處可見。→ 有一個事件源,觸發事件,傳遞參數→ 中介者記下這個事件,向外界廣播,並帶上參賽→ 有一個地方偵聽中介者事件,一旦事件源觸發事件,就從中介者手裡獲取事件相關參數本篇,要體驗的是在AngularJS中的中介者模式。場景是:當創建一個訂單,需要引發一些動作,比如給...
  • 最近在學習移動網頁開發,首先看到head裡面設置了下麵這個屬性:通過搜集資料,大體瞭解了viewport屬性的含義。一、什麼是Viewport手機瀏覽器是把頁面放在一個虛擬的“視窗”(viewport)中,通常這個虛擬的“視窗”(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的視窗中,也不...
  • 聖杯佈局,很久之前就聽過,但是從來都沒深入瞭解過,最近因為做了一個項目,借鑒了薪人薪事這個公司的產品頁面,才第一次用到這種佈局方式。於是就花了點時間,測了下它所有分欄佈局的代碼,每段代碼都非常簡單,但佈局效果很完美,比我以前用的方式好用不少。本文是對它實現方式的一些總結,希望可以把這種技術推薦給跟我...
  • 定義日誌輸出函數(function(){ if(window['console']){ return; } window['console'] = { log: function(){} ,clear: function(){} ,debug: function(){} ,error: ...
  • 今天聊聊一個經典的佈局實例:實現一個三列佈局,其中左側和右側的部分寬度固定,中間部分寬度隨瀏覽器寬度的變化而自適應變化可能很多朋友已經笑了,這玩意兒通過雙飛翼佈局就能輕鬆實現。不過,還請容我在雙飛翼之外,循序漸進地介紹一下我們可以如何實現一個三列佈局。1. 首先,使用浮動佈局來實現一下See ...
  • var val=$('input:radio[name="sex"]:checked').val();附三種方法都可以:$('input:radio:checked').val(); $("input[type='radio']:checked").val();$("input[name='rd.....
  • 適合EXT keycode的查詢A 65B 66C 67D 68E 69F 70G 71H 72I 73J 74K 75L 76M 77N 78O 79P 80Q 81R 82S 83T 84U 85V 86W 87X 88Y 89Z 900 4...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...