1、如何用css樣式設計整個網站字體
網站字體分為兩種類型,一種是默認字體,一種是外部字體。
默認字體
如果整個網頁都要弄成宋體的話就將body定義為宋體即可,即在樣式表中加入:body{font-family:"宋體"},如果只要一部分為宋體,那將那一部分的層的字體樣式定義為宋體就行了。
默認的字體有宋體、楷體、黑體、新宋體、仿宋等。
外部字體
樣式表中嵌入外部字體,用@font-face語法。
@font-face{font-family:name;src:<url>;sRules;}
<name>:為自定義字體名稱
<url>:使用絕對或相對地址指定OpenType字體
<sRules>:樣式表定義
如:
@font-face{
font-family:YH;
src:url(http://www.xxx.com/xxx.ttf);
}
然後再設置需要變換字體的樣式即可,如:body{font-family:YH},字體名稱是上述所說自定義好的名稱。
2、求教網頁設計師,怎麼知道效果圖中的字體是哪種字體,然後在html裡面相應的設置
網上有檢測字體的軟體,把你看到的字捷圖,上傳,下一步,然後對應輸入上面的字,會自動檢測出這是什麼字體,當然不是100%精確,但是給出大概的,你自己看著哪個最像就是哪個了。我經常用的一個網站就是(qiuziti)地址前面後面懂得加什麼吧?直接百度搜這英文也能搜到,建議如果用在網站里的話最好不要用偏僻的字體,畢竟你電腦有,人家不一定有,然後別人看你網頁的時候就會出現字體全部變回宋體,出不了你想要的效果,(特殊字體用圖片再放入HTML中)
3、網頁設計怎麼設置同意字體格式樣式
一、文字樣式設置的基本標簽—<font>
設置字體樣式的基本標簽是<font></font>,被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中,<font></font>容易被多重嵌套,如<font 屬性1=值1><font 屬性2=值2>文本</font></font>。還有一種情況是標簽嵌套錯位,如<font><p>文本</font></p>。為了規范代碼的編寫,避免不必要的錯誤,讀者在初學時一定要謹慎。
二、設置文字的顏色
color是<font></font>標簽的屬性之一,用於設置文字顏色。在D:web目錄下創建網頁文件,命名為font_color.htm,編寫代碼如代碼4.7所示。
代碼4.7 字體顏色的設置:font_color.htm
<html>
<head>
<title>字體顏色的設置</title>
</head>
<body>
淺紅色文字:<font color="#dd0000">HTML學習的本質就是該是什麼就用什麼</font><br />
深紅色文字:<font color="#660000">HTML學習的本質就是該是什麼就用什麼</font><br />
淺綠色文字:<font color="#00dd00">HTML學習的本質就是該是什麼就用什麼</font><br />
深綠色文字:<font color="#006600">HTML學習的本質就是該是什麼就用什麼</font><br />
淺藍色文字:<font color="#0000dd">HTML學習的本質就是該是什麼就用什麼</font><br />
深藍色文字:<font color="#000066">HTML學習的本質就是該是什麼就用什麼</font><br />
淺黃色文字:<font color="#dddd00">HTML學習的本質就是該是什麼就用什麼</font><br />
深黃色文字:<font color="#666600">HTML學習的本質就是該是什麼就用什麼</font><br />
淺青色文字:<font color="#00dddd">HTML學習的本質就是該是什麼就用什麼</font><br />
深青色文字:<font color="#006666">HTML學習的本質就是該是什麼就用什麼</font><br />
淺紫色文字:<font color="#dd00dd">HTML學習的本質就是該是什麼就用什麼</font><br />
深紫色文字:<font color="#660066">HTML學習的本質就是該是什麼就用什麼</font><br />
</body>
</html>
不但可以從代碼4.7中學到color屬性在font標簽中的用法,還可以熟悉各種顏色的表示方法。
三、 設置文字的尺寸
size也是<font></font>標簽的屬性,用於設置文字大小。size的值為1-7,默認為3。我們可以size 屬性值之前加上「+」、「-」字元,來指定相對於字型大小初始值的增量或減量。在D:web目錄下創建網頁文件,命名為font_size.htm,編寫代碼如代碼4.8所示。
代碼4.8 字體尺寸的設置:font_size.htm
<html>
<head>
<title>字體尺寸的設置</title>
</head>
<body>
size為1:<font size="1">HTML學習</font><br />
size為2:<font size="2">HTML學習</font><br />
size為3:<font size="3">HTML學習</font><br />
size為4:<font size="4">HTML學習</font><br />
size為5:<font size="5">HTML學習</font><br />
size為6:<font size="6">HTML學習</font><br />
size為7:<font size="7">HTML學習</font><br />
</body>
</html>
可嘗試在size值前面加上「+」、「-」字元,更靈活地設置文字尺寸。
四、設置文字的字體
face也是<font></font>標簽的屬性,用於設置文字字體(字型)。HTML網頁中顯示的字型從瀏覽端的系統中調用,所以為了保持字型一致,建議採用宋體,HTML頁面也是默認採用宋體。在D:web目錄下創建網頁文件,命名為font_face.htm,編寫代碼如代碼4.9所示。
代碼4.9 字體字型的設置:font_face.htm
<html>
<head>
<title>字體字型的設置</title>
</head>
<body>
字型為宋體:<font size="5">沁園春·長沙-毛澤東</font><br />
字型為楷體:<font size="5">沁園春·長沙-毛澤東</font><br />
字型為黑體:<font size="5">沁園春·長沙-毛澤東</font><br />
字型為隸書:<font size="5">沁園春·長沙-毛澤東</font>
</body>
</html>
五、 使文字傾斜
用雙標簽<i></i>可使被作用文字傾斜,達到特殊的效果,例如文章的日期。<em></em>被稱為強調標簽,也是斜體,目前使用比<i></i>標簽更頻繁,其編寫方法如下:
<i>這是斜體文字</i>
<em>這也是斜體文字</em>
六、 使文字加粗
用雙標簽<b></b>可使被作用文字加粗,是文字更加醒目,例如文章的標題部分。<strong></strong>被稱為特別強調標簽,也是文字加粗,目前使用比<b></b>標簽更頻繁,其編寫方法如下:
<b>這是粗體文字</b>
<strong>這也是粗體文字</strong>
七、給文字加下劃線
用雙標簽<u></u>可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。在D:web目錄下創建網頁文件,命名為font_style.htm,編寫代碼如代碼4.10所示。
代碼4.10 文字修飾的設置:font_style.htm
<html>
<head>
<title>字體修飾的設置</title>
</head>
<body>
<font size="5">斜體:<em>沁園春·長沙-毛澤東</em><br />
加粗體:<strong>沁園春·長沙-毛澤東</strong><br />
下劃線:<u>沁園春·長沙-毛澤東</u><br />
斜體 加粗體 下劃線:<em><strong><u>沁園春·長沙-毛澤東</u></strong></em></font>
</body>
</html>
— 注意:在多個標簽包含同一塊文字時,其包含順序不能錯位。
八、 多種標題樣式的使用
網頁的文章中,為了凸顯標題的重要性,標題的樣式比較特殊。HTML技術保護了一套針對標題的樣式標簽,分別為雙標簽<h1>到<h6>,文字尺寸從大到小代表不同級別的標題。標題標簽有一個特點,獨佔一行、文字加粗、文字居中。這樣,在設置標題的時候就很輕鬆了,並且可設多級標題。在D:web目錄下創建網頁文件,命名為font_h.htm,編寫代碼如代碼4.11所示。
代碼4.11 標題的設置:font_h.htm
<html>
<head>
<title>標題的設置</title>
</head>
<body>
<h1>一號標題</h1>
<h2>二號標題</h2>
<h3>三號標題</h3>
<h4>四號標題</h4>
<h5>五號標題</h5>
<h6>六號標題</h6>
<h1>財富雜志:谷歌為何不會盛極而衰</h1>
<h3>遭遇潛在問題</h3>
<p> 一些業內人士認為,長期壟斷互聯網搜索和廣告市場谷歌可能會盛極而衰。...與此同時,谷歌近日推出的多項新計劃,例如開放手機聯盟、社交網站通用平台OpenSocial、以及可能投資數十億美元競購無線頻段,也遭到了廣泛的質疑。
<h3>將繼續壟斷搜索</h3>
<p> 最近有一些文章稱,如果出現更好的搜索引擎,人們會毫不猶豫地放棄谷歌。但是,即使真有更好的搜索引擎出現,谷歌仍然可以在一段時間內屹立不倒。...在這種情況下,網站速度往往會成為決定勝負的關鍵。</p>
</body>
</html>
九、學會處理網頁中的特殊字元
在HTML中,有一些字元有特殊含義,例如「<」和「>」是標簽的左括弧和右括弧,而標簽是控制HTML顯示的,標簽本身只能被瀏覽器解析,並不能在頁面中顯示。那麼,該怎樣在HTML中顯示「<」和「>」呢?
特殊符號
HTML代碼
特殊符號
HTML代碼
<
<
™(商標符號)
™
>
>
®(注冊符號)
®
「」(英文半形)
"
×
×
§
§
©(版權符號)
©
在D:web目錄下創建網頁文件,命名為string.htm,編寫string.htm代碼如代碼4.12所示。
代碼4.12 特殊字元的設置:string.htm
<html>
<head>
<title>特殊字元的設置</title>
</head>
<body>
<font size="5">
標簽的顯示方法:<HTML><br />
引號的顯示方法:"英文半形雙引號"<br />
商標的顯示方法:™<br />
注冊符號的顯示方法:®<br />
版權符號的顯示方法:©<br />
顯示§<br />
顯示×
</font>
</body>
</html>
— 說明:單獨顯示符號&必須用代碼&。
十、如何更方便地忽略瀏覽器對部分HTML的解析
如果在網頁中作一個類似本書的HTML代碼示例,恐怕得把所有的<和>轉換成<和>,顯得比較麻煩。HTML代碼中的<plaintext>和<xmp></xmp>可以輕松解決這個問題。
<plaintext>是單標簽,它插入到HTML代碼中時,其後面的所有HTML標簽全部失效,即瀏覽器對<plaintext>後面所有的HTML標簽不作解析,直接在頁面上顯示。
<xmp></xmp>是雙標簽,它只使其包含的內容中的標簽失效,<xmp></xmp>的使用更為普遍。在D:web目錄下創建網頁文件,命名為html.htm,編寫代碼如代碼4.13所示。
代碼4.13 忽略標簽的設置:html.htm
<html>
<head>
<title>忽略標簽的設置</title>
</head>
<body>
<h2>沁園春·長沙</h2>
<xmp>獨立寒秋,<strong>湘江北去</strong>,橘子洲頭。 <br />看萬山紅遍,層林盡染; <br />漫江碧透,<u>百舸爭流。</u> <br /></xmp>
鷹擊長空,<strong>魚翔淺底,</strong> <br />萬類霜天競自由。 <br />悵寥廓,<u>問蒼茫大地</u>,誰主沉浮?<br />
<plaintext>
攜來百侶曾游,<br />憶往昔崢嶸歲月稠。 <br /> 恰同學少年,風華正茂; <br /> 書生意氣,揮斥方遒。 <br /> 指點江山,激揚文字, <br /> 糞土當年萬戶侯。 <br /> 曾記否,<strong>到中流擊水</strong>,浪遏飛舟!
</body>
</html>
十一、其他文字修飾方法
為了滿足不同領域的需要,HTML還有其他修飾文字的標簽。比較常用的有上標格式標簽和下標格式標簽。某些場合甚至要用到刪除效果,即可用HTML的中劃線標簽。
— 上標格式標簽為雙標簽<sup></sup>,多用於數學指數的表示,比如某個數的平方或立方。
— 下標格式標簽為雙標簽<sub></sub>,多用於注釋,以及數學的底數表示。
— 中劃線標簽為雙標簽<strike></strike>,多用於刪除效果。
在D:web目錄下創建網頁文件,命名為other.htm,編寫代碼如代碼4.14所示。
代碼4.14 其他修飾標簽的設置:other.htm
<html>
<head>
<title>其他修飾標簽的設置</title>
</head>
<body>
<font size="5">
沁園春<sup>長沙</sup>!<br />
數學指數的表示:2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
沁園春<sub>長沙</sub>!<br />
數學底數的表示:log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
刪除效果:<strike>我被刪除了</strike>
</font>
</body>
</html>
4、網頁設計中的導航字體誰知道怎麼設置或者怎麼製作才能平滑
現在一般導航文字是直接寫在網頁上的,沒有平滑設置。
倒是在photoshop里默認有平滑。在photoshop做好的字體,怎麼會在網頁里變樣?
5、網頁設計,字體大小不會隨瀏覽器設置而改變
字體大小有相對大小和絕對大小之分,下面給你詳細說下:
語法 : font-size: < 絕對大小 > | < 相對大小 > | < 長度 > | < 百分比 > 允許值 : < 絕對大小 > xx-small | x-small | small | medium | large | x-large | xx-large < 相對大小 > larger | smaller < 長度 > < 百分比 > (in relation to parent element) 初始值 : medium 適用於 : 所有對象向下兼容 : 是字體大小屬性用作修改字體顯示的大小。絕對長度 ( 使用的單位為 pt- 像素和 in- 英寸 ) 需要謹慎地考慮到其適應不同瀏覽環境時的弱點。對於一個用戶來說,絕對長度的字體很有可能會很大,或很小。一些大小指定的定義如下 :
H1 { font-size: large } P { font-size: 12pt } LI { font-size: 90% } STRONG { font-size: larger } 網頁製作者需要清楚 Microsoft Internet Explorer 3.x 會錯誤地將 em 和 ex 單位當作像素,這很可能會令到使用了這些單位的文本不可讀。瀏覽器還會錯誤地將百分比值視為相對於選中部分的預設字體大小,而不是上級元素的字體大小。這種做法像 H1 { font-size: 200% } 這是危險的,其大小將被視為 IE 的一級標題的預設字體大小的兩倍,而不是兩倍於上級元素的字體大小。在這種情況中, BODY 通常會被視為上級元素,而且很可能定義一個 medium 的字體大小,然而,在 IE 中一級標題的預設字體大小可能被認為是 xx-large 。注意到了這些錯誤後,網頁製作者在使用字體大小屬性時,應該小心使用百分比的值,而且應該盡量避免使用 em 和 ex 這兩個單位。
6、在製作網頁中,怎樣設置字體?
<font face="字體">fdf</font>
7、網頁製作的字體大小怎麼設置
&
8、製作網頁,一般字體設置為多大,行距為多少。
字體大小可以用不同的方式計算,如點或像素,由於基於像素的列印需要轉換為磅,因此建議使用磅。
1、網頁文本顯示最合適的字體大小約為12個磅。現在許多綜合性網站通常使用9磅字體大小,因為頁面中有許多內容需要排列,大字體可用於標題或其他需要強調的地方,小字體可用於頁腳和輔助信息。需要注意的是,小尺寸容易產生整體感和精緻感,但可讀性差。
2、行距的變化也會對文本的可讀性產生很大的影響。行距設置接近字體大小的權重更適合文本。行距的固定比例為10:12,即文字10磅,行距12磅。這主要是出於以下考慮:適當的行距會形成明顯的水平白帶引導觀眾的視線,過寬的行距會使一行文字失去良好的連續性。
(8)網頁設計如何設置更多的字體擴展資料:
網頁製作流程
1、引策劃
網站的整體定位、功能規劃、應用分析、流程設計和內容架構組織。
2、前台
網站頁面的設計製作,包括版式規劃、色彩應用、版面設計、切片輸出、頁面整合、動畫和多媒體設計、交互環節設計和頁面代碼編寫等。
3、後台
程序設計、數據操作、功能實現、管理界面和管理功能設計等,側重界面設計的,應在圖形設計和視覺創意上多下功夫,做頁面代碼和後台程序則要多熟悉web標准、標記語言、內嵌語言、腳本語言、資料庫等內容。
參考資料來源:網路-網頁製作