網(wǎng)站建設(shè) 中關(guān)于默認(rèn)字體你需要了解

        首先要從瀏覽器默認(rèn)字體說(shuō)起，瀏覽器中的樣式往往在不同的瀏覽器、不同的語(yǔ)言版本甚至不同的系統(tǒng)版本都有不同的設(shè)置，這就導(dǎo)致如果直接利用默認(rèn)樣式的頁(yè)面在各個(gè)瀏覽器下顯示非常不一致，于是就有了類似YUI的reset之類用來(lái)盡量重寫瀏覽器的默認(rèn)設(shè)置保證各個(gè)瀏覽器樣式一致性的做法。

    拿字體來(lái)說(shuō)，各個(gè)瀏覽器默認(rèn)的字體種類、字體大小和字體行高都不一樣，比如IE8的中文版在Windows XP下顯示網(wǎng)頁(yè)時(shí)默認(rèn)字體是宋體，而英文版肯定不會(huì)如此。所以我們需要統(tǒng)一設(shè)置默認(rèn)的字體樣式，以便實(shí)現(xiàn)一致的顯示效果來(lái)保證設(shè)計(jì)的一致性和提高開發(fā)效率。

    第一：字體arial

     我們頁(yè)面的絕大部分內(nèi)容字符都是中文，毫無(wú)疑問(wèn)目前為止在網(wǎng)頁(yè)上最常用也是最通用的顯示中文的字體是宋體，但是宋體在顯示英文、數(shù)字和英文符號(hào)時(shí)過(guò)于糟糕，比如?字符，所以我們一般期望通過(guò)CSS來(lái)實(shí)現(xiàn)用更好的字體樣式來(lái)顯示它們，然后用宋體來(lái)顯示中文和中文符號(hào)。之所以選擇arial是因?yàn)椋?/p>

    1，Windows和Mac都預(yù)裝了這款字體，應(yīng)該是使用最廣泛的網(wǎng)頁(yè)字體了。它的潛在對(duì)手tahoma和helvetica就沒(méi)有這么幸運(yùn)了。

     2，視覺(jué)設(shè)計(jì)的專業(yè)人士可能會(huì)認(rèn)為在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘寶的默認(rèn)字體樣式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;

      這是一個(gè)很不錯(cuò)的選擇，但是你也會(huì)發(fā)現(xiàn)Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作為第一默認(rèn)字體。所以從美觀和可讀性上來(lái)講arial應(yīng)該是完全可以接受的。

一般情況下設(shè)置font-family都會(huì)在最后設(shè)置通用字體族以保證其安全性，比如Google的設(shè)置為font-family:arial,sans-serif;，但是至少在非中文版的Win7下當(dāng)編碼是GBK時(shí)，IE8會(huì)因sans-serif來(lái)渲染宋體，導(dǎo)致字體出現(xiàn)變形，這就是為什么淘寶需要在sans-serif前加上宋體而Google無(wú)需這樣做的原因。

     因?yàn)橹形淖煮w的選擇非常有限，所以目前所有的主流瀏覽器都設(shè)置使用宋體來(lái)顯示中文。Baidu的首頁(yè)和搜索結(jié)果頁(yè)使用font-family:arial;可以從側(cè)面說(shuō)明這樣做的安全性。可能有人注意到Firefox中國(guó)版默認(rèn)顯示的中文字體是微軟雅黑，這是因?yàn)橹\智網(wǎng)絡(luò)擅自修改了用戶自定義樣式，不允許網(wǎng)頁(yè)的樣式覆蓋瀏覽器設(shè)置的樣式。也是由于類似的情況，我們要彈性設(shè)計(jì)網(wǎng)頁(yè)非常重要。

     使用英文字體作為第一默認(rèn)字體會(huì)導(dǎo)致的問(wèn)題之一就是中英文以及符號(hào)混排時(shí)的對(duì)齊問(wèn)題、通過(guò)設(shè)置行高和hasLayout能解決絕大部分情況，但是都不會(huì)很完美，如果把字體改成“宋體”能徹底的解決問(wèn)題。很明顯，這個(gè)問(wèn)題只出現(xiàn)在IE上。所以，如果你的網(wǎng)站很少使用英文、數(shù)字和英文符號(hào)，那么直接設(shè)置{font-family:\5b8b\4f53;}也是很合理的選擇。

     第二：樣式優(yōu)先級(jí)

     通常用戶看到的頁(yè)面的樣式會(huì)受到三層控制:

     1，瀏覽器的默認(rèn)樣式； 2，網(wǎng)頁(yè)定義樣式； 3，用戶自定義樣式。

    和CSS一樣，后面的優(yōu)先級(jí)高于前面的，也就是說(shuō)網(wǎng)頁(yè)定義樣式可以覆蓋瀏覽器的默認(rèn)樣式，而用戶自定義樣式優(yōu)先級(jí)最高。不過(guò)，當(dāng)有 !important 時(shí)，網(wǎng)頁(yè)樣式可以覆蓋用戶自定義樣式。用戶!important > 網(wǎng)頁(yè)!important > 用戶 > 網(wǎng)頁(yè) > 瀏覽器默認(rèn)。

      第三：大小12px

      12px是宋體能顯示的極限，雖然微軟雅黑能顯示更小的字體，但目前的應(yīng)用環(huán)境尚未成熟。由于宋體基本上是目前顯示中文唯一的通用Web字體，所以12px成為最常用的字體大小。我們當(dāng)然可以依據(jù)產(chǎn)品的需要來(lái)修改這個(gè)默認(rèn)值。

      不用考慮基于字體大小（em）的設(shè)計(jì)。

       在Chrome3.0之后的中文版中，字體大小最小值是12px，比如你設(shè)置最小字體為10px，最后也變成12px。

       第四：行高1.5倍

       這是一個(gè)經(jīng)驗(yàn)值，不同的產(chǎn)品對(duì)這個(gè)值要求可能不同，但我們一般會(huì)設(shè)置最常用的為默認(rèn)值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字體大小默認(rèn)值是13px，行高是13*1.231=16.003px，默認(rèn)的行高是默認(rèn)字體的1.231倍。對(duì)于中文來(lái)說(shuō)，常用的字體大小12px、14px、16px、18px等偶數(shù)大小，在IE6和IE7設(shè)置其行高也為偶數(shù)能解決一些特殊情況下的字體對(duì)其問(wèn)題。

        在IE6和IE7中，行高值必須大于字體的2px才能保證字體的完整顯示或當(dāng)其作為鏈接時(shí)能有效顯示下劃線。

        設(shè)置line-height時(shí)，注意不要使用單位（包括%在內(nèi)），因?yàn)樽庸?jié)點(diǎn)會(huì)繼承經(jīng)過(guò)運(yùn)算后的line-height值，所以當(dāng)使用單位后瀏覽器會(huì)把line-height計(jì)算成第一次定義的絕對(duì)值，而不會(huì)隨著字體大小的變化而變化，而無(wú)單位的數(shù)值表示是所在容器的font-size的倍數(shù)，所以設(shè)置為無(wú)單位的數(shù)值是最佳選擇。

       五：性能和效率第

       1，大部分平臺(tái)都有arial，減少瀏覽器的查找時(shí)間。

       2，代碼最少，書寫方便。arial基本上是名字最短的字體了，可以節(jié)約CSS的大小。

        3，所有的字母都小寫，目前Google就是這樣做的，好處是既可以編寫更快也能提升Gzip壓縮的效率。

         中文最好用unicode表示，比如使用宋體是{font-family:\5b8b\4f53;}，使用微軟雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，這樣的好處是避免編碼問(wèn)題，同時(shí)能得到所有的主流瀏覽器的支持。

    通過(guò)對(duì)中英文及符號(hào)混排的測(cè)試， 我發(fā)現(xiàn)微軟雅黑其實(shí)表現(xiàn)相當(dāng)不錯(cuò)，包括英文數(shù)字和英文字符以及在IE6和IE7的顯示效果上，但唯一的遺憾是在XP下如果安裝了微軟雅黑字體的用戶沒(méi)有打 開“使用屏幕字體的邊緣平滑”選項(xiàng)的話，在firefox、Safari和Opera、特別是IE6下會(huì)非常模糊難以辨認(rèn)。針對(duì)這個(gè)問(wèn)題目前并沒(méi)有很好的 解決方案，所以只有等到IE6使用比率非常小的時(shí)候才可能正式的使用它。或許需要到2014年，XP死掉的時(shí)候。

     雖然很早就有了@font-face，但是瀏覽器的支持、網(wǎng)速和商業(yè)問(wèn)題，導(dǎo)致它很少被應(yīng)用。最近關(guān)于字體的好消息是Firefox3.6將支持Web Open Font Forma。關(guān)于Web字體未來(lái)的相關(guān)信息可以看Web 字體的未來(lái)、關(guān)于 Web 字體：現(xiàn)狀與未來(lái)和再談 Web 字體的現(xiàn)狀與未來(lái)。

網(wǎng)站想要提升用戶體驗(yàn)有很多方法，人機(jī)交互內(nèi)容就是其中之一。在前些年，由于一些技術(shù)的限制，導(dǎo)致這一內(nèi)容的添加具有很大的困難，但現(xiàn)在隨著各項(xiàng)技術(shù)的興起，人機(jī)交互的設(shè)計(jì)已經(jīng)不存在很大的障礙，很多網(wǎng)站的人機(jī)交互方面做的非常完善且的題，這可以為網(wǎng)站的營(yíng)銷帶來(lái)極大的幫助。但值得注意的是，人機(jī)交互并不是一個(gè)只有正面作用的事情，事實(shí)上，如果處理不當(dāng)，很可能會(huì)帶來(lái)一些負(fù)面的影響。我們認(rèn)為，人機(jī)交互既然作為一項(xiàng)提升用戶體驗(yàn)的設(shè)計(jì)，那么就一定要基于用戶體驗(yàn)來(lái)設(shè)計(jì)。

一、人機(jī)交互在設(shè)計(jì)時(shí)應(yīng)注意交互效果不是越多越好

很多人在進(jìn)行一項(xiàng)操作時(shí)往往會(huì)簡(jiǎn)單的選擇大量的堆砌，如SEO優(yōu)化過(guò)程中對(duì)于關(guān)鍵詞的堆砌。在交互設(shè)計(jì)時(shí)，也往往會(huì)出現(xiàn)這一現(xiàn)象。一些交互人員可能由于主觀的認(rèn)為，更加絢麗的鮮果就可以讓網(wǎng)站給用戶帶來(lái)良好的觀感，所以會(huì)將交互效果制作的十分復(fù)雜，或者說(shuō)是效果的簡(jiǎn)單堆砌。但其實(shí)對(duì)于用戶而言，這樣的設(shè)計(jì)并不一定能夠帶來(lái)良好的體驗(yàn)，雖然可能大部分用戶對(duì)于密密麻麻的大段文字不感興趣，但這并不意味著他們能夠接受過(guò)多或是過(guò)于炫技的美術(shù)效果。

交互設(shè)計(jì)的初衷是讓用戶獲得更好的觀感，也可以讓頁(yè)面顯得更加生動(dòng)，但如果美術(shù)效果過(guò)多，就會(huì)在很大程度上影響用戶的視線，甚至?xí)斐裳刍潄y的效果，同時(shí)也會(huì)讓用戶無(wú)法集中注意力于網(wǎng)站的中心內(nèi)容上，如果交互設(shè)計(jì)做成這樣，那么很難說(shuō)這是一個(gè)成功的設(shè)計(jì)。

二、頁(yè)面交互應(yīng)與營(yíng)銷相配合

提升用戶體驗(yàn)的直接目的其實(shí)就是為了提高網(wǎng)站的轉(zhuǎn)化率，所以在交互的設(shè)計(jì)時(shí)也應(yīng)該與營(yíng)銷相配合以達(dá)到提高轉(zhuǎn)化率的目的。如果能夠?qū)⒕W(wǎng)站上的重點(diǎn)內(nèi)容做好交互，無(wú)疑就可以讓用戶更加關(guān)注這些你想讓他們看到的東西。比如在線客服等功能，就可以通過(guò)一些精巧的設(shè)計(jì)引起用戶的關(guān)注，來(lái)引導(dǎo)他們點(diǎn)擊。

另外，如產(chǎn)品展示環(huán)節(jié)，也可以通過(guò)精美的交互設(shè)計(jì)來(lái)吸引用戶的注意力，讓他們對(duì)你的產(chǎn)品產(chǎn)生濃厚的興趣，這也可以給用戶留下非常深刻的印象。總而言之，單純的交互設(shè)計(jì)的作用并不明顯，一個(gè)優(yōu)秀的交互設(shè)計(jì)應(yīng)該達(dá)到的效果是有效的提高網(wǎng)站的轉(zhuǎn)化率。只有讓用戶更加關(guān)注網(wǎng)站中的核心內(nèi)容，才能夠顯示出交互設(shè)計(jì)的意義。

三、保證加載速度不會(huì)太慢

當(dāng)然，人機(jī)交互設(shè)計(jì)的再好，也難以避免的一個(gè)缺陷就是會(huì)使網(wǎng)站的加載速度變慢。因?yàn)榛贐/S技術(shù)的網(wǎng)站，是必須要通過(guò)預(yù)加載到客戶端計(jì)算機(jī)才可以運(yùn)行。所以網(wǎng)站上的每一個(gè)元素都要通過(guò)客戶端瀏覽器的解釋之后才能夠顯示。

所以我們可以得出，越復(fù)雜的交互設(shè)計(jì)，無(wú)疑就會(huì)給網(wǎng)站的加載速度帶來(lái)越多的負(fù)擔(dān)，如果人機(jī)交互效果設(shè)計(jì)的過(guò)于復(fù)雜，在這些內(nèi)容呈獻(xiàn)給用戶之前，首先讓用戶感到的是網(wǎng)站加載時(shí)的遲緩，這是網(wǎng)站的一個(gè)非常嚴(yán)重的減分項(xiàng)。所以，在設(shè)計(jì)人機(jī)交互時(shí)，應(yīng)該盡量合并JavaScript代碼和CSS樣式代碼等以避免資源的堵塞。而在圖片方面，也要在保證清晰度的情況下盡量的縮減大小，這樣才能夠盡可能的讓網(wǎng)站的加載速度不會(huì)受到太大的影響。

人機(jī)交互出現(xiàn)的目的就是為了讓用戶體驗(yàn)更進(jìn)一步，所以在進(jìn)行交互的設(shè)計(jì)時(shí)，也一定要以用戶體驗(yàn)出發(fā)，只有這樣，才能讓交互效果真正的給網(wǎng)站帶來(lái)正面的能量。

網(wǎng)站關(guān)鍵詞：網(wǎng)站建設(shè)  網(wǎng)站設(shè)計(jì)  網(wǎng)站制作  上海網(wǎng)站建設(shè)  上海網(wǎng)站設(shè)計(jì)  上海網(wǎng)站制作  上海網(wǎng)絡(luò)公司  網(wǎng)站建設(shè)上海  上海做網(wǎng)站  上海建設(shè)網(wǎng)站  上海做網(wǎng)站公司  上海建網(wǎng)站公司  上海高端網(wǎng)站建設(shè)  上海手機(jī)網(wǎng)站建設(shè)  怎么建設(shè)網(wǎng)站  如何建設(shè)網(wǎng)站  營(yíng)銷網(wǎng)站建設(shè)  品牌網(wǎng)站建設(shè)  網(wǎng)站建設(shè)方案  響應(yīng)式網(wǎng)站建設(shè)  外貿(mào)網(wǎng)站建設(shè)  公司網(wǎng)站建設(shè)  建設(shè)網(wǎng)站  網(wǎng)站建設(shè)服務(wù)  高端網(wǎng)站建設(shè)  網(wǎng)站優(yōu)化服務(wù)  上海網(wǎng)站公司  企業(yè)網(wǎng)站設(shè)計(jì)  官網(wǎng)制作  官網(wǎng)建設(shè)  官網(wǎng)設(shè)計(jì)  網(wǎng)站建設(shè)公司  網(wǎng)站設(shè)計(jì)公司  網(wǎng)站制作公司