web設計藝術字_web界面設計規范有哪些

㈠ web設計中怎樣使用藝術字

插入→圖片→藝術字

㈡如何製作icon-fontweb字體ttf

這里，以已經有了一個點陣圖為例~灰色的，一個丑不拉幾驚世駭俗的……額……丑圖標。我們把它在AI里摳圖來~填上一個紅色~然後把紅色的摳出來的新矢量圖給復制下來。

新建一個畫布，（好吧，畫布啊窗口啊文件啊什麼的，你愛怎麼稱呼都好，不要在意這些細節），這里要注意的是，如果你每
個icon的大小不一樣，那你至少得保證你的SVG畫布一樣大才行，新建的畫布就和你切圖時用的統一尺寸一樣，一個標准就好，把你所有的icon都放進這
個尺寸里，調節大小，它們變成字體就不會錯。這里樓主需要46*46的，所以建了46*46的。

在新的畫布里，粘貼出你剛才復制的新摳的矢量圖~由於樓主的畫布大小沒有大變化，所以和之前步驟一中的圖差不多，仔細看，可以看到，沒有原來的底圖了，只有我們同樣丑不拉幾的新摳的圖標。

下面，我們給我們的圖標填充成白色。為什麼要白色？因為程序員使用icon-font的ttf文件時，他們的默認顏色
一般是黑色和白色，具體的色值、大小、陰影特效等一切，由於製作完成後是ttf，和他們的代碼字體沒有區別，所以他們會自己根據需要來隨時靈活變動，而不
是跟你說「噢設計獅~給我一個紅的~綠色的也來一個~黃的也來一個~」他們可以自己來處理，不需要為了這種小事情打擾你。所以，你只需要把它弄成白色的就
好啦~怕變色以後看不到它了么？點擊視圖中的輪廓，就可以看到它啦~注意，變成輪廓的時候，其實沒有黑色邊框的啦~只是為了讓你能夠看到它才顯示的喲~

保存成SVG格式。保存以後，桌面上生成了一個看起來像是瀏覽器文件的東西，什麼鬼？這是瀏覽器才能打開么？打開怎麼
沒東西？因為你是白色啦~看不到是很正常的~背景也是白色的嘛~哈哈哈……這個可以通過屬性查看，它是SVG文檔的格式。名字真的可以起這么隨意么？當然
啦~在製作icon-font的頁面里隨時可以編輯起名字之類的啦~所以，不要在意這些細節，讓我們飛快的進入下一步。

進入icomoon，來來來，先科普一下界面的使用啦，最主要的功能集中在下面的三個導航按鈕哦~自己製作的矢量圖，用中間的那個就好，左邊的按鈕里可以從它的網站上選擇海量圖標，右邊的是生成按鈕，得上傳或者選擇以後才能使用。

在icomoon中上傳我們的圖標。點擊上傳圖標的按鈕，就會打開文件夾，選擇你存儲的位置，選中剛才導出的那個
SVG圖標文件就可以。放心，這並不是你上傳給他們做資源~只是在線製作而已~並不需要你捐獻自己的靈感~選擇完以後，你會在icomoon上看到你的
SVG圖標喲~是不是好神奇~別急呀~還有最後一兩步啦~

選中你這個SVG文件，並點擊右下角的生成按鈕，選擇以後，你的圖標會被有黃色描邊的白色圓角矩形籠罩，不怕，點右下角的生成按鈕。這時候跳轉到了新的頁面，我的上傳圖片中，綠色框中是你的圖片命名等信息，我隨便亂搞的。你會看到下載按鈕在剛才生成按鈕的位置，來，果斷按下載，完成我們的製作，大功告成。注意，這里需要看你上方的幾個操作按鈕是否為選擇按鈕，如果是紅色的刪除按鈕，那意味著你現在的滑鼠就是個刪除器，點一下就會從網頁上取消你的上傳操作，將會需要重新上傳。編輯按鈕就可以在這里直接對你的圖標進行命名和CSS使用時的命名了。

下載好了，在桌面有一個icomoon的壓縮包，裡麵包含了所有的相關文件，怎麼用？直接把這個壓縮包或者解壓後的文件夾發給你的程序員就好了，他會知道怎麼用的。他不知道怎麼用怎麼辦？打他呀！裝X不打草稿！不會用還敢叫我們做！！咳咳咳……來來來，秀一下我們的成果。這個字體文件，你自己也是應該可以用的，只是是圖形而已，可以自己根據愛好來研究~

㈢製作網頁用什麼字體好

Helvetica: 被評為設計師最愛的字體，Realist風格，簡潔現代的線條，非常受到追捧。在Mac下面被認為是最佳的網頁字體，在Windows下由於Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，細節上比如R和G有小小差別。如果字型大小太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的標准字體，屬於humanist風格，稍微活潑一點。Mac下的顯示要比Win下好。
Verdana: 專門為了屏顯而設計的字體，humanist風格，在小字型大小下仍可以清楚顯示，但是字體細節缺失嚴重，最好別做標題。
Tahoma: 也是humanist風格，字體和Verdana有點像，但是略窄一些，counter略小，曾經是Windows的標准字體，Mac 10.5之後默認也有安裝。
Trebuchet MS: 為微軟設計的一個humanist風格字體，個人覺得個性太過突出，用得不好會不搭。

Serif

Georgia: 基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還算OK。
Times: Times是為了報紙而設計的，特點是可以在有限的空間塞進去更多的文字，筆畫較弱，小字型大小正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文，被罵得很慘之後換成了Georgia。

中文不熟，拋磚引玉：

中易宋體：Win最常見的字體，小字體點陣，大字體TrueType，但是大字體並不好看，所以最好別做標題。
微軟雅黑：Vista之後新引入的字體，打開Cleartype之後顯示效果不錯，不開Cleartype發虛。
華文細黑：Mac下的默認中文。
Droid Sans和衍生的WenQuanYi Microhei：Andriod中的中文，也是Linux絕大多數發行版本的默認中文，，當然也有用WenQuanyi Zenhei的，不過比較少了。

㈣如何製作自己的網頁字體圖標

從設計單獨的圖標開始，到把它們轉化成@font-face格式以備嵌入，乃至授權給他人使用，整個過程中我們將僅使用免費軟體和在線服務。感覺怎麼樣呢？你不必依託於任何深奧的知識就可以製作出一套成功的英文字體（包括字母和數字），而只需要眼睛來設計——你面對的可能是非常非常小的東西。

最終，你將會收獲一個製作設計元素的過程（方法），它的意義遠遠在製作出簡單的圖標之上。

在我們繼續之前，首先應該談談，究竟希望通過在設計中使用圖標達到什麼目的，又是什麼使得一個圖標比下一個更成功。先講理論再講應用。為了完成這個任務，我們必須思考圖標作為符號學的一部分，所扮演的角色。

什麼是優秀的圖標？

符號學，從廣義上來說就是研究符號系統，我們如何對它們的形成和維護做出貢獻，它們亦因我們對世界的理解而受到影響。

不論何時，當你從「它象徵著什麼」—— 它向你的觀眾傳達了什麼信息，或者它喚起了他們什麼概念——思考你的某一部分設計工作時，你就是以符號學家的角度來審視你的設計。符號學像其它語言學一樣，的確可以覆蓋一種語言，在一個網站上面，有很多東西不是通過文字表達出來的，例如顏色、字體、形狀（圖標）。每個人都應該注意的是，這些東西所表達的都含有一種很強的文化因素。在中國，紅色可以表示好運氣，而在很多西方國家，它卻意味著危險。
術語「icon」在符號學中有一個特殊的意思。icon是一個神器，通過相似表達某事物。例如，一個標記地圖位置的icon。它擁有一個類似真實的
地圖標記的形狀,因此它可以表示一個位置，反過來，真正的地圖位置標記使人們想起各種有意義的概念。其中這些有抽象的概念，比如地點；也有不太抽象的概
念，比如這個位置可能在什麼地方。

一些所謂的圖標並不具有真正意義的代表性。無處不在的RSS圖標，一個點和兩個同心圓弧段，沒有什麼比它更像Really Simple
Syndication 了。構成RSS圖標的形狀通過單獨約定具有象徵意義，對此我們已經達成了共識。不過，一個RSS圖標更適合被稱為RSS標志。
現在，我希望我們已經確定了下面兩項成功的網站icon需要遵循的准則：

要有與真實事物的相似點，例如，一個類似真實列印機的列印圖標。

你的圖標在符號系統中應該是一個熟悉的，可識別的標志。

字體圖標日益受到歡迎

Icon字體，由於其提供了一種圖標速記方式，長期以來被認為是一種加強型UI設計，它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳，使用它可以使你的設計更加亮麗、吸引更多用戶點擊。

與圖片相比，使用icon式字體是一個相對新的主意。然而，與圖片（背景圖片方式）相比，它具備很多固有的優勢，因此它的吸引力正在逐漸增長。早在9月初，我在微博上寫了它的一些好處，Chris Coyier顯然也有類似的想法，幾周之後也向更多觀眾介紹了它。基於以上兩篇文章和其它內容，我編寫了這個較為完整的特徵列表：

它們的尺寸能夠輕松調整，並且不會損壞圖像質量（作為矢量圖）；

給icon定義顏色和文本一樣簡單。例如，對於一個rss圖標，color:orange；

可以把許多icons排列在一個組中，也就是一個文件中，這樣只需要一次http請求就可以了;

正如Chris所指出的，它們在IE6中也可以借著透明性顯示出形狀（這一點與PNG圖片不同）;

對於那些應該出現在文字附近的圖標，對齊方式和包裝都不是問題（因為它們是文本）;

你可以應用CSS3的text-shadow和background-clip:text效果，以便凸顯字型的形狀;

不像SVG，icon字體很容易實現跨瀏覽器兼容；

問題

Chris說過，使用icon字體是一個不錯的主意，我要告訴你。

盡管如此，icon字體的使用現狀並不理想。首先，一些優質的可用字體，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收費的。實際上意味著真有兩個問題：

你或許不得不投資一部分錢。

無論你是否需要花錢，你將會被迫接受其他一些人的糟糕設計。

除了自動抓取程序，我假定主要是網頁設計師將會閱讀這篇文章。我是一個設計師，我不認為只有我一個討厭依靠別人的作品，使自己的設計思路大打折扣這
種事兒。當然，我更不喜歡那種有支付許可權的想法。我知道自己要使用什麼圖標，並且我知道如何才能使其適合我的整體設計。我想要那種控制力。

經過一些搜索，我想介紹一下Inkscape的svg字體編輯器。通過使用Inkscape和一款在線轉換器（SVG字體到TTF），我製作出了字體「Heyding」，這個字體在 Simurai』s list（由Coyier的文章鏈接到）中有介紹。我不打算將自己的字體賣給你（它是免費的），但是我想它會帶給你一個非常好的概念。

使用Inkscape製作icon字型

啟動Inkscape

我們先從下載和安裝Inkscape開始。你也應該使用我的icon字體啟動器模板，它們被放在這個GitHub倉庫的資源文件夾里（以後這個項目中還會有更多）。一旦你在Inkscape中打開了這個文件，你應該通過在主菜單中打開以下窗口來設置好你的工作空間：

OBJECT → FILL AND STROKE

OBJECT → ALIGN AND DISTRIBUTE

TEXT → SVG FONT EDITOR
在SVG字體編輯面板中，點擊「Font」下的「Font1」。現在，你的工作空間看起來應該有點兒像這個截圖：

值得指出的是， baseline不是在畫布的下邊界之下：如果你希望與相鄰的字體共享同一條基線，你的圖標應該很輕微地懸在畫布的底部。我已經用Georgia，Arial和一些網頁字體進行了測試。

製作你的第一個字型

為定義字型，點擊SVG字體編輯面板中的「Glyphs」選項卡，然後點擊面板下方的「Add
Glyh」按鈕。一開始你可能不太清楚，但如果你在你的字形（「字型1」）上點擊，一個欄位將會顯示出來，它要求你輸入你需要的圖標對應的字元。我們首先
要做一個簡單的星形，所以我建議你輸入的字元「s」，「S」或「*」：

現在我們已經定義了字型對應的字元，我們需要製作字型本身。由於這次我們僅僅要製作一個星星，我們應該從Inkscape左邊的工具欄中選擇有用的
Stars and Polygons tool
，然後，在畫布上繪制一個星星。你會發現，這個工具自帶的選項允許您更改星星的外觀。在我的例子中，選擇了角數為5，spoke
ratio為0.5，rounded value為0.1。

使用Align and Distribute panel（可能在SVG Font Editor下面隱藏著）使星星橫向居中，然後鄉下拖動形狀使觸及基線。關閉網格顯示之後，畫布看起來應該像這樣子：

在我們的icon字體中，字型只是形狀，沒有顏色、層級或者漸變的形狀。因此，為了使我們的星星成為一個合格的字體候選者，我們必須將它由一個對象
轉化成基於路徑的圖形。你可以通過在主按鈕上選擇星星，然後是PATH → OBJECT TO
PATH來完成這一任務。現在，選擇了星星之後，我們可以在SVG Font Editor 中，高亮顯示可用的「s」字型，然後點擊 Get
curves from selection按鈕：

當你在Sample Text 區域輸入「s」時，你的星星應該被預覽出來，如下所示：

製作更加復雜的icon

你已經製作出了第一個可擴展的SVG字體字型。通過使用Fill and
Stroke面板上的選項：編輯路徑節點，以及合並對象和筆畫，能夠使你做出更加不凡的icon設計。由於我們還有很多要講，我不想深入完成一個完整的
Inkscape教程，但是遵循下面的簡單規則會給你帶來好處：

堅持使用黑色筆畫和填充，只是為了提醒你：那些icon僅僅是形狀，而非復雜的矢量圖。為icon上色這件工作，我們會在最終產品中使用CSS來完成。

所有對象和筆畫（線條）必須被轉化成路徑（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）

當有多個對象和/或筆畫被用來完成一個icon字型時，它們應該被合並起來（使用PATH → COMBINE 或者，在某些情況下，使用 PATH → UNION）

為了在已有的形狀上剪切出想要的形狀，將形狀放置在主形狀上面，選擇兩個形狀，然後選擇 PATH → DIFFERENCE。點擊Get curves from selection ，黑色塊上面的白色區域剔除之後就是你要的形狀。

准備嵌入你的字體

假如你已經重復了很多次我剛才所描述的方法，創建了一些有用的圖標，並且，字體文件被保存為myicons.svg。現在，你將要准備好把這個圖標庫用於網頁中。

把SVG轉化成TTF

你應該採取的第一項措施是，將SVG字體格式轉換成一個更熟悉、更通用的格式。 TTF是一種用於本地安裝的卓越格式。同時，它還為再轉化成@font-face提供了一個良好的基礎。可以進行字體轉換的在線服務包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我個人最喜歡的，是http://www.freefontconverter.com，因為我不會排隊，也從來沒看到它產生什麼故障。

我想，不需要向你介紹如何使用這個資源也足以顯示我的誠意了。醒目的文件上傳欄位，select元素和巨大的轉換按鈕會讓你迅速抓住重點，真的。

編輯字體信息

既然你已經獲得了一個TTF，我推薦你現在編輯產生的元數據。對字體進行重命名、添加屬性和描述，使它准備好被安裝、嵌入和分發。這也是一種聲明字體為你所創造的途徑。運行Windows的讀者可以選擇使用貌似很霸氣的 Microsoft Font Properties Editor或者允許免費使用X天的Typograf。對於蘋果和Linux用戶，我希望得到你們更好的意見。

重要提示：雖然Microsoft Font Properties
Editor允許您添加作者，描述和許可信息，它似乎並沒有讓你編輯字體名稱、附言名稱等基本數據。這些欄位是被禁用的。如果你想使用這些特殊的功能，你
需要在SVG轉換為TTF之前，在SVG代碼中編輯禁止的值。在你喜歡的文本編輯器（我用Notepad++）中打開原始的SVG，並編輯以下內容：

Font Name:標簽中可以尋找到, font-family 屬性

Postscript Name:標簽中可以尋找到, id屬性

Description:你應該在這個標簽中添加一個描述（作者、許可等）。請注意這與TTF描述文字是不同的，轉換過程中將不會被保留；你還需要為TTF添加單獨的描述信息。

嵌入字體

一旦你在本地系統中安裝了TTF，並且已經預覽過，確定沒有出現意外狀況，你就可以在Font Squirrel的 @font-face generator中運行它了。為了使輸出代碼的效率和效果盡量好，這里有幾個專家模式中的選項值得一提：

Subsetting：該選項允許您只運行需要的字元集（包括字元編碼、類型、語言等選項），減少文件大小。

Remove kerning:您的圖標將幾乎總是單獨出現，所以字距是沒有必要的。據稱，這也將減小文件大小。

WebOnly™:如果你希望您的字體僅僅用於web中，而非桌面- 你可以選擇此選項。它也可以更好地滿足您的授權計劃。現在我將介紹許可證。

發布字體

如果你有興趣發布你的字體，給它添加許可是一個比較好的做法。否則許多字體網站將不會帶它玩兒。由於我們製作圖標時使用的是免費、開源的軟體，發布時也不妨這樣做。

目前，有很多可用的授權選項，而逐一調查研究它們有時是令人費解的一件事。 GNU General Public License是完全可以接受的，但你可能要考慮SIL Open Font License。使用這種許可證的主要優點是，reserved font name：即允許其他設計師修改字體，但他們需要用不同的名字。在實踐中，這意味著，對圖標設計的一些不良行為不能以「你的名字」來進行。

有了這兩種許可，你還應該在一個文本文件中保存版本信息，同時在字體的元信息中插入版權聲明和完整許可的URL鏈接。如果需要更具體的說明，請訪問各自的許可證頁面（上面的鏈接）。

CSS spriting的終結者

為什麼要停下使用SVG字體做通用圖標的腳步？有了做圖標的能力，也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這一點像CSS
sprities，所有這些視覺元素都可以保存在一個文件中，減少了伺服器調用http請求的次數；不過，icon字體的元素都可以調整大小，而不必依賴
於位置坐標（背景位置值）才能正確顯示。這使它們更適合於 responsive design。

讓我們假裝要選擇使用一個SVG字體去代替一些我的steampunk般的blog里基本的設計元素。組件設計的一個簡單的HTML表格呈現會是這個樣子：

關於這種方式，最好的事情就是通用性。舉例來說，從左邊的第二個齒輪形狀既可作為一個微小的圓點設計，又可以是一個巨大而抽象的背景裝飾。著色很簡
單：color:maroon，但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來可以為它添加紋理和觸感。為了讓你一開始有所啟發，查看this excellent gallery of CSS3-enhanced webfonts。

關於屏幕閱讀器的快速筆記

以這種方式使用字體來顯示視覺元素的一個問題是，在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪，箭頭之類的圖標，但是屏幕閱讀器將堅持讀出指定這些設計的字元。對於使用裝飾性的SVG字體元素，我建議聽取Coyier的建議：為Unicode的Supplementary Private Use Area分配向量。這樣的符號不應該由讀者來讀出。

一個協作式icon web字體

作為我的JavaScript導師，Rupert，有一天向我指出，使用SVG字體來創建圖標集為合作提供了一個有趣的機會。你看，SVG的代碼 - XML的一種形式 - 是高度標准化而且輕松可讀的。正是源碼的順序讓我覺得，icon字體的開發很適合選擇像GitHub這樣的協作編碼服務。

這個想法契合了我想要的符號含義：如果一個圖標是由很多人協商之後一致確定的，那麼它的形成過程中也存在一定的「共識」。通過我們的圖標標識系統設計出來的，一定是最典型的圖標。我們應該創建一種屬於社區的icon詞彙，並且它對於需要的人來說是有意義的。

為了發展這個想法，我創建了一個公開的GitHub倉庫Community Icon Font，這個倉庫的文件結構並不復雜：仔細閱讀上面的Inkscape教程和項目主頁的內容應該可以為你解答所有的疑惑。如果你是GitHub的新成員，嘗試閱讀它們的幫助頁面，或者問問你附近的技術人員（我正是這樣做的）。

㈤網頁設計怎麼設置同意字體格式樣式

一、文字樣式設置的基本標簽—
設置字體樣式的基本標簽是，被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中，容易被多重嵌套，如文本。還有一種情況是標簽嵌套錯位，如文本。為了規范代碼的編寫，避免不必要的錯誤，讀者在初學時一定要謹慎。
二、設置文字的顏色
color是標簽的屬性之一，用於設置文字顏色。在D:web目錄下創建網頁文件，命名為font_color.htm，編寫代碼如代碼4.7所示。
代碼4.7 字體顏色的設置：font_color.htm
<html>
<head>
<title>字體顏色的設置</title>
</head>
<body>
淺紅色文字：HTML學習的本質就是該是什麼就用什麼 
深紅色文字：HTML學習的本質就是該是什麼就用什麼 
淺綠色文字：HTML學習的本質就是該是什麼就用什麼 
深綠色文字：HTML學習的本質就是該是什麼就用什麼 
淺藍色文字：HTML學習的本質就是該是什麼就用什麼 
深藍色文字：HTML學習的本質就是該是什麼就用什麼 
淺黃色文字：HTML學習的本質就是該是什麼就用什麼 
深黃色文字：HTML學習的本質就是該是什麼就用什麼 
淺青色文字：HTML學習的本質就是該是什麼就用什麼 
深青色文字：HTML學習的本質就是該是什麼就用什麼 
淺紫色文字：HTML學習的本質就是該是什麼就用什麼 
深紫色文字：HTML學習的本質就是該是什麼就用什麼 
</body>
</html>
不但可以從代碼4.7中學到color屬性在font標簽中的用法，還可以熟悉各種顏色的表示方法。
三、設置文字的尺寸
size也是標簽的屬性，用於設置文字大小。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：HTML學習 
size為2：HTML學習 
size為3：HTML學習 
size為4：HTML學習 
size為5：HTML學習 
size為6：HTML學習 
size為7：HTML學習 
</body>
</html>
可嘗試在size值前面加上「＋」、「－」字元，更靈活地設置文字尺寸。
四、設置文字的字體
face也是標簽的屬性，用於設置文字字體（字型）。HTML網頁中顯示的字型從瀏覽端的系統中調用，所以為了保持字型一致，建議採用宋體，HTML頁面也是默認採用宋體。在D:web目錄下創建網頁文件，命名為font_face.htm，編寫代碼如代碼4.9所示。
代碼4.9 字體字型的設置：font_face.htm
<html>
<head>
<title>字體字型的設置</title>
</head>
<body>
字型為宋體：沁園春·長沙-毛澤東 
字型為楷體：沁園春·長沙-毛澤東 
字型為黑體：沁園春·長沙-毛澤東 
字型為隸書：沁園春·長沙-毛澤東
</body>
</html>
五、使文字傾斜
用雙標簽可使被作用文字傾斜，達到特殊的效果，例如文章的日期。被稱為強調標簽，也是斜體，目前使用比標簽更頻繁，其編寫方法如下：
這是斜體文字
這也是斜體文字
六、使文字加粗
用雙標簽可使被作用文字加粗，是文字更加醒目，例如文章的標題部分。被稱為特別強調標簽，也是文字加粗，目前使用比標簽更頻繁，其編寫方法如下：
這是粗體文字
這也是粗體文字
七、給文字加下劃線
用雙標簽可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。在D:web目錄下創建網頁文件，命名為font_style.htm，編寫代碼如代碼4.10所示。
代碼4.10 文字修飾的設置：font_style.htm
<html>
<head>
<title>字體修飾的設置</title>
</head>
<body>
斜體：沁園春·長沙-毛澤東 
加粗體：沁園春·長沙-毛澤東 
下劃線：沁園春·長沙-毛澤東 
斜體加粗體下劃線：沁園春·長沙-毛澤東
</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>
    一些業內人士認為，長期壟斷互聯網搜索和廣告市場谷歌可能會盛極而衰。...與此同時，谷歌近日推出的多項新計劃，例如開放手機聯盟、社交網站通用平台OpenSocial、以及可能投資數十億美元競購無線頻段，也遭到了廣泛的質疑。
<h3>將繼續壟斷搜索</h3>
    最近有一些文章稱，如果出現更好的搜索引擎，人們會毫不猶豫地放棄谷歌。但是，即使真有更好的搜索引擎出現，谷歌仍然可以在一段時間內屹立不倒。...在這種情況下，網站速度往往會成為決定勝負的關鍵。
</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>

標簽的顯示方法：<HTML> 
引號的顯示方法："英文半形雙引號" 
商標的顯示方法：™ 
注冊符號的顯示方法：® 
版權符號的顯示方法：&; 
顯示§ 
顯示×

</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>獨立寒秋，湘江北去，橘子洲頭。 看萬山紅遍，層林盡染； 漫江碧透，百舸爭流。 </xmp>
鷹擊長空，魚翔淺底， 萬類霜天競自由。 悵寥廓，問蒼茫大地，誰主沉浮？ 
<plaintext>
攜來百侶曾游， 憶往昔崢嶸歲月稠。 恰同學少年，風華正茂； 書生意氣，揮斥方遒。 指點江山，激揚文字， 糞土當年萬戶侯。 曾記否，到中流擊水，浪遏飛舟！
</body>
</html>
十一、其他文字修飾方法
為了滿足不同領域的需要，HTML還有其他修飾文字的標簽。比較常用的有上標格式標簽和下標格式標簽。某些場合甚至要用到刪除效果，即可用HTML的中劃線標簽。
— 上標格式標簽為雙標簽，多用於數學指數的表示，比如某個數的平方或立方。
— 下標格式標簽為雙標簽，多用於注釋，以及數學的底數表示。
— 中劃線標簽為雙標簽<strike></strike>，多用於刪除效果。
在D:web目錄下創建網頁文件，命名為other.htm，編寫代碼如代碼4.14所示。
代碼4.14 其他修飾標簽的設置：other.htm
<html>
<head>
<title>其他修飾標簽的設置</title>
</head>
<body>

沁園春長沙！ 
數學指數的表示：23=8、1002=10000 <hr />
沁園春長沙！ 
數學底數的表示：log381=4、log5125=3 <hr />
刪除效果：<strike>我被刪除了</strike>

</body>
</html>

㈥ web界面設計規范有哪些

一、網頁尺寸
製作網頁時，我們選用的解析度是72像素/英寸，使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是：可辨識性和易讀性。
網頁的文字設計是系統默認的字體：宋體、微軟黑體、蘋果系統黑體，英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種：
12px是應用於網頁的最小字體，適用於非突出性的日期，版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。

㈦ html網頁的字體怎麼設置好看

想用CSS設置字體樣式，首先得了解CSS 字體屬性，CSS 字體屬性可以定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
如下：
font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family 設置字體系列。
font-size 設置字體的尺寸。
font-size-adjust 當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch 對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style 設置字體風格。
font-variant 以小型大寫字體或者正常字體顯示文本。
font-weight 設置字體的粗細。
如果你希望文檔使用一種字體可以這樣
body {font-family: sans-serif;}
指定字體系列,如下，這樣所有h1標簽裡面的字體就定義好了
h1 {font-family: Georgia;}
其中他們優先順序是 h1>body
注意：如果讀者沒有安裝 Georgia字體，會默認為其他字體，如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優先順序排列，然後用逗號進行連接：
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}
如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號如：
...
字體風格
font-style 屬性最常用於規定斜體文本。
該屬性有三個值：
•normal - 文本正常顯示
•italic - 文本斜體顯示
•oblique - 文本傾斜顯示
實例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體變形
font-variant 屬性可以設定小型大寫字母。
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。
實例
p {font-variant:small-caps;}
字體加粗
font-weight 屬性設置文本的粗細。
使用 bold 關鍵字可以將文本設置為粗體。
關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那麼這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價於 normal，而 700 等價於 bold。
如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。
實例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字體大小
font-size 屬性設置文本的大小。
有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使標題看上去像段落。
請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 來標記段落。
font-size 值可以是絕對或相對值。
絕對值：
•將文本設置為指定的大小
•不允許用戶在所有瀏覽器中改變文本大小（不利於可用性）
•絕對大小在確定了輸出的物理尺寸時很有用
相對大小：
•相對於周圍的元素來設置大小
•允許用戶在瀏覽器改變文本大小
注意：如果您沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。
使用像素來設置字體大小
通過像素設置文本大小，可以對文本大小進行完全控制：
實例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

㈧ UI設計常用字體有哪

1.平平穩穩:微軟雅黑/方正中黑
微軟雅黑系列：在網頁設計中這款字體使用的非常平凡，這款只無論是放大還是縮小，形體都非常的規整舒服。在設計過程中建議多使用雅黑，大標題用加粗字體，正文用常規字體。
方正正中黑系列：中黑系列的字體筆畫比較銳利而渾厚，一般運用在標題文字中。但這種字體不適用於正文中，因為邊緣相對比較的復雜，文字一多會影響用戶的閱讀。

㈨如何在webview中設置自定義字體

Web只是我們作為設計者和開發者所期待的一種理想化結果，開發成本低、輕松跨平台、迭代更新快，但是顯然，現階段用戶的期待和手機設備廠商的期待還是體驗上更勝一籌的Native。Web之於我們，只是一種趨勢。在這個也許會非常久的過渡階段，對復雜產品來說，Native App + Web App也許是個不錯的解決方案。

web設計藝術字

與web設計藝術字相關的內容