網頁設計怎麼在圖片上添加字體_怎樣在網頁設計軟體中加字體

1、網頁製作中如何對文字添加圓形背景圖案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<style type="text/css">
.radius{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}/*半徑*/
.transform{
transform:rotate(45deg);
float: left;
}/*旋轉*/
.box-shadow{
box-shadow: 7px 2px 20px #000;
}/*盒子陰影 x y 陰影模糊值顏色*/
input[type=button]{
background: green;
border:0;
cursor: pointer;
color: white;
float: right;
}
.content{padding: 20px;background: pink;overflow: hidden;}
.model{width: 50px;height: 50px;background: blue;color: white}
.square{}
.circle{margin-left:20px;border-radius:50px;float: left;}
</style>
</head>
<body>
<div class="content radius">
<div class="model square transform box-shadow">321321</div>
<div class="model circle box-shadow"></div>
<input type="button" value="change" class="box-shadow">
</div>
</body>

</html>

復制粘貼到你的 html文件用 google 或者火狐或者Opera 或者 safari 打開看看~~~

2、怎樣在網頁設計軟體中加字體

對於網頁設計，
強調個性是好，但不要強調在字體上。
要考慮用戶的環境，特殊字體在用戶端很大程度是無法顯示的！
要以用戶為中心，字體類型一般按默認。
要麼你用PS把字體做成圖片格式，但不利於SEO優化哦

3、求教網頁設計師，怎麼知道效果圖中的字體是哪種字體，然後在html裡面相應的設置

網上有檢測字體的軟體，把你看到的字捷圖，上傳，下一步，然後對應輸入上面的字，會自動檢測出這是什麼字體，當然不是100%精確，但是給出大概的，你自己看著哪個最像就是哪個了。我經常用的一個網站就是（qiuziti）地址前面後面懂得加什麼吧？直接百度搜這英文也能搜到，建議如果用在網站里的話最好不要用偏僻的字體，畢竟你電腦有，人家不一定有，然後別人看你網頁的時候就會出現字體全部變回宋體，出不了你想要的效果，（特殊字體用圖片再放入HTML中）

4、網頁設計中文一般用的字體大小，一般怎麼設置font-family。怎麼用fireworks獲取圖中文字的字體和大小？

一般中文的字體大小是12px或者14px。操作方法如下：

1、打開webstorm軟體，在HTML文件中創建h1到h6六個標簽，分別font-style設置字體風格，italic斜體，normal正常，oblique傾斜，inherit指繼承格式，revert還原字體風格。

2、<br />文本換行顯示，在使用p標簽寫段落文字的時候，在網頁中設置換行但是在實際顯示的時候還是不會有換行的格式顯示，需要在文字中間加上<br />符號，設置換行。

3、設置字體的粗細的情況，根據使用font-weight然後選擇字體粗細，bold粗體，bolder稍粗，如圖所示，可以根據需要設置不同的字體粗細。

4、使用font-size設置字體大小，在css文件上輸入font-size之後系統會自動顯示可以選擇的大小，large，larger等等，也可以直接輸入數字來定義字體的大小。

5、最後運行，如下圖所示，就完成了。

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

從設計單獨的圖標開始，到把它們轉化成@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的新成員，嘗試閱讀它們的幫助頁面，或者問問你附近的技術人員（我正是這樣做的）。

6、懂網頁製作的進，如圖，我想在第一個標題欄的地方添加大型字體，如何操作啊

最簡單的方法是：

<h1>我是標題哦~</h1>

另外的方法是css樣式控制

效果是：

7、記事本html網頁製作的代碼和竅門哪位大神指點一下，比如怎樣更改字體大小顏色怎樣插入圖片等等。

參考w3cschool,標簽的使用都很詳細的
另外還是用dw，這個操作起來比較容易，而且不易出錯

8、在網頁製作里如何使用自己設計的字體?不用切圖

如果是常用字體，如「微軟雅黑」這種基本人手都有。其他設計字體還是切成圖吧，目前還難以辦到。

9、網頁設計:怎麼在網頁最底部添加文字

您好，
1、網頁字體的樣式選擇
在英文站方面，國外的很多東西不是免費的，當然也包括英文字體，所以你的網站字體不要選擇那些太有個性的字體，因為你的訪客可能電腦上根本就沒有下載這個字體，從而導致網站所要表達的信息不能完美的詮釋。那麼國外瀏覽者PC中常有的字體有Arial, Times New Roman, and Verdana。
2、中文站方面呢，普通的大眾絕對沒有自己去下字體安裝的愛好，一般的字體全是XP或其他系統自帶的，選擇宋體肯定是不會錯的。其他楷體等等可以自己斟酌選擇。注意，那個漂亮的微軟雅黑字體也不是每個人都裝了的。
字體樣式選擇建議：字體一定要選擇大眾化字體，種類選擇上盡量不要超過三種。
3、網頁字體的大小選擇
在互聯網普及之初，英文網頁占的比例比較大。由於英文字母相對漢字來說超簡單，都沒有筆畫是否復雜一說，英文的小字體總是能顯得很簡潔、清晰，絕大部分英文網站的主體內容都是選擇小號字體，9px, 10px, 11px, 12px,13px大小的字體在英文網頁中十分常見，外國人也習慣看小號字體了。
中文網頁不能照搬英文網頁的設計，主要是因為兩種語言的字體表現形式完全不一樣，中文網頁中字體大小在10px以下看不清，一般要達到12px才有不錯的效果。目前來看，12個像素和14個像素大小的宋體在可閱讀性和美觀上結合的是最好的。比12個像素再小的話，可閱讀性和美觀性都沒有了。比14個像素大的話，可閱讀性當然是有的，但是美觀性就差了一些。所以基本上所有的中文網站都是以這兩個大小的文字來呈現的。
字體大小的選擇建議：英文網站字體大小可以選擇11px, 13px, 15px等字體大小，中文網站字體大小可以選擇12px, 14px, 16px等字體大小。
網頁字體的顏色選擇
字體的顏色直接會體現在網頁的整體風格上，黑色，灰色，白色的搭配給人沉悶，中庸，職業，嚴肅等感覺，如果在適當的地方加入些許紅色，則會顯得充滿刺激的快感，並且總能吸引眾人的
目光。字體顏色的選擇非常的重要，而且也非常的深奧，可以是一門專門的學科，Micfly的一篇小小文章也僅僅能給各位拋磚引玉而已。你也可以參考其他的一些資料，Micfly做網站的時候經常會參考【終極配色手冊】。
4、網頁字體的其他特性選擇
除了以上說的網頁字體的樣式，大小，顏色之外，網頁中的字體還可以設置其他各種特性：粗體，斜體，下劃線，行距，段距，對齊方式等等。其實大家在排版的時候可以直接用word來做實驗，看看什麼樣的感覺最好。
字體選擇是一種感性、直觀的行為。但是，無論選擇什麼字體，都要依據網頁的總體設想和瀏覽者的需要。例如：粗體字強壯有力，有男性特點，適合機械、建築業等內容；細體字高雅細致，有女性特點，更適合服裝、化妝品、食品等行業的內容。在同一頁面中，字體種類少，版面雅緻，有穩定感；字體種類多，則版面活躍，豐富多彩。關鍵是如何根據頁面內容來掌握這個比例關系。

10、如何在網頁製作中給網頁字體文件增加矢量圖標

搜索阿里巴巴矢量圖標庫，可以找你想要的矢量圖標。

導航:首頁 > 萬維百科 > 網頁設計怎麼在圖片上添加字體

網頁設計怎麼在圖片上添加字體

與網頁設計怎麼在圖片上添加字體相關的知識