您現在的位置是:電腦技術吧?>? 編程技術 ??>??字體設計網站,網頁字體設計??>??正文詳情

字體設計網站,網頁字體設計

鄔懷雁2019-11-15 02:00:53 人圍觀
簡介網頁一般用什么字體字體的設置是新手網頁制作的首要困難。如何控制字體大小,如何去掉超鏈接字體的下劃線,是網民最常問的問題。好吧,讓我們徹底地看看字體的所有方面:字符

字體(Font)的設置是網頁制作新手遇到的第一個難點。

如何控制字體大小,如何取消超鏈接字體的下劃線是網友來信問得最多的。

好,我們來徹底研究一下字體的各個方面:  字符集的設定。

  在查看html文件原代碼時,我們經常可以在文件頭head和/head之間看到這么一句代碼:  meta http-equiv=Content-Type content=text/html; charset=gb2312  這段代碼的作用是什么呢?

是否可以刪除呢?

  其實這是meta標簽的設定語句,是給瀏覽器看的。

它的作用就是告訴瀏覽器:這個HTML文件是采用gb2312字符集制作的。

當瀏覽器讀到這一代碼,便以gb2312字符集來解釋和翻譯網頁原代碼,然后我們就可以看到正確的網頁。

所以這個meta語句是非常重要的,盡量不要刪除。

  gb2312就是我們最熟悉的GB簡體碼,英文是iso-8859-1字符集。

其它還有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集,分別用于不同的字體顯示。

  字體的使用。

  在網頁里,字體的定義語句是:font face=Arial顯示文字/font  其中Arial就是一種字體的名稱。

  默認的瀏覽器定義的標準字體是中文宋體和英文times new Roma字體。

也就是說,如果你沒有設置任何字體,網頁將以這兩種標準字體顯示。

同時,著兩種字體也可以在任何操作系統和瀏覽器里正確顯示。

  windows另外自帶了40多種英文字體和5種中文字體。

這些字體,你也可以在網頁里自由使用和設置。

凡是使用windows操作系統的瀏覽器都可以正確顯示這些字體,但在其它操作系統里,如unix 則不能完全正確顯示。

  如果你需要用一種特殊的字體來體現你的風格,那么如何讓大家可以真正看到你的設計頁面呢?

解決的辦法是:用圖片。

  將需要用這種字體的地方用圖片代替,以保證所有人看到的頁面是同一效果。

    字體的樣式(style)。

  字體的樣式有四種:正常體(regular),斜體(Italic),粗體(Bold),粗斜體(Bold Italic)。

設置方法很簡單,阿捷就不多羅嗦了。

  字體的效果。

  這里指通過html語言設定可以直接顯示的效果,在html里的語句設定為:  span style=text-decoration: overline顯示文字/span  其中,overline是指上劃線效果。

其它常用的效果還有:underline(下劃線),uppercase(大寫)等等。

  字體大小的控制。

字體大小的控制是本節的重點。

  一般字體默認的大小是12pt(鎊).用font size= 1語句可以將文字增大2pt。

這種方法我們都已經掌握了。

而現在網絡上最流行的小中文字體大小為9pt,是如何設定的呢?

有三種方法:  1.用span style=font-size:9pt顯示文字/span語句來設定。

  顯然這種方法非常麻煩,你必須為每段文字都設定大小。

  2.用CSS層疊樣式表。

CSS是DHTML的一個組成部分,它可以定義整個頁面的字體顯示風格和大小。

是較為簡便的方法。

比如,這里需要設定整個頁面文字大小為9pt,只要將下面這段代碼加入html代碼的head和/head之間:  style type=text/css  --  body {FONT-SIZE: 9pt}  th {FONT-SIZE: 9pt}  td {FONT-SIZE: 9pt}  --  /style  其中FONT-SIZE:9pt指字體的大小為9鎊  3.第二種方法已經簡化了許多步驟,但是仍然不是最理想的方法,因為你必須在每個頁面的head區都放置這么一段代碼,擴大了文件的字節。

另外這樣的做法還有一個重大缺點,就是如果我需要修改整個站點的字體大小,就必須一頁一頁的改!  所以推薦給你最終也是目前最好的方法---外部摸板文件調用法。

  外部摸板調用就是說你將css的設定作成一個單獨的文件,在每個頁面里都調用它。

一旦你需要修改字體大小,只要修改一個.css文件,幾百個頁面就同時修改了。

(這種方法類似子程序調用編寫過程序的網友很容易理解:)  調用的具體方法如下:  (1)將上面的css代碼copy成一個mycss.txt文件,然后修改后綴名為mycss.css  (2)在html文件的head/head之間插入LINK href=mycss.css rel=stylesheet type=text/css,  語句調用mycss.css(注意有關路徑的設置正確)OK!  字體超鏈接樣式的設定。

  通常在網頁的body中設置連接的顏色,如:body link=#FF00FF vlink=#FF0000 alink=#008080  其中:link -- Hyperlink(連接)的顏色  vlink-- visited Hyperlink(已訪問過的連接)顏色  alink-- active Hyperlink (當前活動的連接)顏色顏色用rgb的16進制碼表示如紅色是#FF0000。

  同樣用CSS可以更簡便的設定網頁超連接的樣式,看下面這段代碼  style type=text/css  A:link {TEXT-DECORATION: none;COLOR: #0000FF}  A:visited {TEXT-DECORATION: none;COLOR: #000000}  A:active {TEXT-DECORATION: none;COLOR: #FF0000}  A:hover {COLOR: #FF0000}  /style  將它插入html文件的head區就可以了。

其中link設定的是有超鏈接的顏色;visited是訪問過的超鏈接顏色;active 是鼠標移上去的顏色;hover是鼠標點擊時的顏色。

而text-decoration:none是指取消超鏈接的下劃線顯示。

關于CSS的設定還有更多的用法和技巧,比如在同一頁中設定不同的字體大小和超鏈接顏色,請學習有關CSS的專門知識在這里我們不在冗述。

  ●上面已經介紹了字體在技術上的各個方面。

有關字體的設計使用,目前還沒有一個成熟的理論,下面是幾條網頁設計中字體的使用原則,僅供參考:  1.不要使用超過3種以上的字體。

字體太多則顯得雜亂,沒有主題。

  2.不要用太大的字。

因為版面是寶貴,有限的,粗陋的大字體不能帶給訪問者更多信息。

  3.不要使用不停閃爍的文字。

想讓瀏覽者多停留一會兒的話,就不要使用閃爍的文字。

  4.原則上標題的字體較正文大,顏色也應有所區別。

版權聲明:本文由 鄔懷雁 整理編輯。

原標題:如何設計字體,什么是字體設計

轉載注明出處:http://www.dn9ww09s.icu/program/12351.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ghost xp sp3是什么,xpsp3

    ghost xp sp3是什么,xpsp3 相關圖片ghost xp sp3安裝步驟下載地址:thunder://qufodhrwoi8vegl0b25nlm1vzmf6ahuy29至jgwoc9yuc9zte1g0dit1nuwfftnfq1ghost xp sp3安裝圖解...

  • 3d字體制作,制作3D字體的軟件

    3d字體制作,制作3D字體的軟件 相關圖片ps制作3D立體字要制作本文的3D字體,我們需要使用xara3d和焰火。Xara3d可以下載到搜索引擎。該軟件主要用于制作文本的三維模型,然后導入焰火中。然后我們用焰火在文本中添手機3d字體...

  • Windows系統下載,XP系統下載

    Windows系統下載,XP系統下載 相關圖片XP系統純凈版Windows XP嵌入式(XPE)系統是北京奧運會開幕式的英雄!現在我們提供下載地址!2008年8月8日晚上8點,讓我們看開幕式!2008年北京奧運會雄偉的開電腦xp系統還能用嗎...

  • word怎樣插圖片,如何在幻燈片插圖片

    word怎樣插圖片,如何在幻燈片插圖片 相關圖片如何在幻燈片里加圖片一。單擊“插入”中的“圖像”選項,打開選定的圖像文件,找到要插入的圖像,然后單擊“確定”,此時在彈出的對話框中單擊“是”,即可復制網站目錄下的...

  • 新蘿卜家園xp系統,蘿卜家園xp系統安裝

    新蘿卜家園xp系統,蘿卜家園xp系統安裝 相關圖片xp2013年3月,本系統適用于臺式機和筆記本電腦,采用微軟原MSDN免激活版本①系統特點:只做少量的適度簡化,保證系統的純度和穩定性,并保持原系統番茄花園xp系統安裝步驟...

  • excel表格有粗有細,excel表格線有粗有細

    excel表格有粗有細,excel表格線有粗有細 相關圖片word表格怎么外粗內細Dreamweaver MX 2004創建了一個細線表。如果您只將表格的邊框定義為1(border=1)和邊框顏色值(例如border color=?00000excel表格邊框線變細...

  • U盤裝機,裝機u盤怎么用

    U盤裝機,裝機u盤怎么用 相關圖片裝機系統友好提示:如果您不了解U盤引導,如果系統啟動藍屏恢復,也可以使用硬盤引導模式,請輸入coms替換AHCI以外的其他硬盤模式安裝前一定要備份原系統的重要數據。建議裝機...

  • 網頁代碼,網頁代碼怎么看

    網頁代碼,網頁代碼怎么看 相關圖片查看網頁代碼源有時,為了方便,我們用word來制作網頁,因為我們對word比較熟悉,排版也比較方便,或者我們只使用word中的圖片和單詞。然而,在word直接生成的網頁中會有html網頁代碼...

  • 新蘿卜家園xp系統,蘿卜家園xp系統安裝

    新蘿卜家園xp系統,蘿卜家園xp系統安裝 相關圖片xp此系統適用于臺式機和筆記本電腦,使用的是Microsoft的原始無激活MSDN版本。①系統特點:只做少量的適度簡化,保證系統的純度和穩定性,并保持原有的XP系統番茄花園xp系統安裝步驟...

  • 怎么用easyrecovery,easyrecovery

    怎么用easyrecovery,easyrecovery 相關圖片easyrecovery有兩個easyrecovery個人版和PC版的區別,數據恢復軟件是什么?很多網友知道如何使用這樣的軟件,如何區分它們,easyrecovery個人版和PC版。如何使用easyrecovery恢復不了...

熱評文章

  • Win XP Activator,win XP

    Win XP Activator,win XP 相關圖片win10系統調整成XP風格Windows XP SP3的簡體中文官方下載地址也已經出現,并確認該文件與之前泄露的版本完全一致。官方下載(速度較慢):Windows XP SP3簡體中文提Windows xp密鑰...

  • 裝系統后無法連接網絡,win7重裝后不能上網

    裝系統后無法連接網絡,win7重裝后不能上網 相關圖片重裝之后無法聯網問:我剛重新安裝了系統,發現找不到網絡連接。我的朋友讓我重置一個,但是我在登錄后被提示錯誤678。怎么了?我是Netcom A:這條線路的原因是有人應該檢查一下電...

  • 飛舞的小鳥像,飛舞的小鳥

    飛舞的小鳥像,飛舞的小鳥 相關圖片像小鳥一樣什么點評:本文教你如何在閃光燈下制作飛鳥,并告訴你飛鳥的運動規律。讓我們看看如何畫卡通風格的鳥。無論是在風景動畫還是在MTV中,總有鳥兒在天空中自由飛翔的畫...

  • 啟動winpe有什么作用,pe的作用

    啟動winpe有什么作用,pe的作用 相關圖片winpe什么是winpe?winpe的角色是什么?什么是winpe?Windowspe,windowspreallation environment的全稱,中文是prewinpe有什么用...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載軟件介紹這個安裝程序是一個ISO可引導的映像文件。建議下載后直接用Nero刻錄鏡像文件,然后用CD安裝,或者安裝到硬盤上,在相應的目錄下運行winnt32.baXP免費升級win10...

  • 用戶體驗設計流程,用戶體驗設計案例

    用戶體驗設計流程,用戶體驗設計案例 相關圖片用戶體驗 產品設計當o2o正在席卷各大城市時,設計師如何才能與時俱進,在沒有碎片感的情況下創造線上線下的用戶體驗?今天,來自阿里的李天分享了一個超級實用的用戶體驗設計方...

  • 電腦安裝雙系統的利弊,蘋果電腦裝雙系統利弊

    電腦安裝雙系統的利弊,蘋果電腦裝雙系統利弊 相關圖片電腦如何雙系統你對電腦雙機系統了解多少?如果有人問雙重制度有什么好處?那么,小編現在就可以告訴你它的三大好處了。讓我們一起認識他們。熟悉不同的操作系統來安裝雙系統...

  • HTML語法,HTML基礎語法

    HTML語法,HTML基礎語法 相關圖片HTML基本語法[圖像標記]使用圖像標記時需要注意兩件事:第一,文件名,第二,路徑。首先要注意的是文件名是否正確,大小寫是否一致!文件名不正確。不管電腦有多強大,它都找不...

  • win7 最低配置,windows7的最低配置要求

    win7 最低配置,windows7的最低配置要求 相關圖片win7推薦配置要將家庭計算機升級到win7 32位系統。太晚了,不知道你家里的電腦是否受支持。同時,您會擔心安裝后是否會卡住。昨天,我的朋友告訴我win732的最低配置要求。windows7最低...

  • flash如何模糊,flash模糊

    flash如何模糊,flash模糊 相關圖片flash模糊遮罩在一些電影片名中,我們經常能看到模糊而清晰的特效動畫,具有很大的視覺沖擊力。大多數高質量的模糊效果都是經過Photoshop處理后才導入flash中,然后作為腳flash導出的...

關注微信

变脸官网查询