① 將圖標轉換成web字體 我顯示不出來的
字體文件創建好了,你可以先用word試試么...
② 桌面圖標及字體都很正常,但使用IE瀏覽網頁時,Web頁面的字體變大,排版混亂是怎麼回事啊
在IE上點擊查看--文字大小,選擇一合適的文字大小即可
③ webstorm怎麼把字體變大
方法/步驟
首先我們雙擊桌面的webstorm圖標,打開webstorm。
之後隨便打開一個文件就可以看到其字體大小,方便一會兒比較。
然後點擊上面菜單欄的「文件」,找到其子菜單中的「設置」,點擊打開。
在打開的新窗口中找到「Editor」選項,點擊它前面的加號。
然後再找其子菜單中的選項,直到找到「Font」選項,點擊即可。
這時候在右側就可以設置其字體和大小了,設置完成後點擊下面的確定按鈕即可。
跟原來的字體大小比較發現其已經變化了。
④ web前端怎麼用iconfont 調節字體大小
iconfont的使用
平時的網頁開發該如何使用iconfont?在這邊微信小編給大家推薦一個工具:Iconfont-阿里巴巴矢量圖標庫。
WEB前端開發,圖標的快速製作
⑤ 如何製作自己的網頁字體圖標
從設計單獨的圖標開始,到把它們轉化成@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的新成員,嘗試閱讀它們的幫助頁面,或者問問你附近的技術人員(我正是這樣做的)。
⑥ 如何WEB中把字體加粗
我不太清楚你到底要做什麼,你貼出來的三段代碼,分別表示了三段不同的 區隔標記 ,而且後兩段都沒有結束區域的符號,三段中也沒有內容或文字,所以不知道你是想在哪一個區域把哪些文字加粗。
如果你是自己做網頁,使用HTML語言,Dreamweaver裡面的功能輕輕鬆鬆可以幫你實現你要的操作。
如果你是在瀏覽網頁是看人家的源代碼,你即使修改了,也只能在自己本地瀏覽啊,那何不用Dreamweaver打開更方便。
最後,認真回答你的問題。<DIV align="center"><FONT face="宋體"><strong>你要輸入的字</strong></FONT></DIV> 是沒錯的,「你要輸入的字」就是被加粗的部分,並在這個區域內被居中。
給你提供一些HTML代碼,自己研究下吧。
標記 類型 譯名或意義 作 用 備注
文件標記
<HTML> ● 文件聲明 讓瀏覽器知道這是 HTML 文件
<HEAD> ● 開頭 提供文件整體資訊
<TITLE> ● 標題 定義文件標題,將顯示於瀏覽頂端
<BODY> ● 本文 設計文件格式及內文所在
排版標記
<!--註解--> ○ 說明標記 為文件加上說明,但不被顯示
<P> ○ 段落標記 為字、畫、表格等之間留一空白行
<BR> ○ 換行標記 令字、畫、表格等顯示於下一行
<HR> ○ 水平線 插入一條水平線
<CENTER> ● 居中 令字、畫、表格等顯示於中間 反對
<PRE> ● 預設格式 令文件按照原始碼的排列方式顯示
<DIV> ● 區隔標記 設定字、畫、表格等的擺放位置
<NOBR> ● 不折行 令文字不因太長而繞行
<WBR> ● 建議折行 預設折行部位
字體標記
<STRONG> ● 加重語氣 產生字體加粗 Bold 的效果
<B> ● 粗體標記 產生字體加粗的效果
<EM> ● 強調標記 字體出現斜體效果
<I> ● 斜體標記 字體出現斜體效果
<TT> ● 打字字體 Courier字體,字母寬度相同
<U> ● 加上底線 加上底線 反對
<H1> ● 一級標題標記 變粗變大加寬,程度與級數反比
<H2> ● 二級標題標記 將字體變粗變大加寬
<H3> ● 三級標題標記 將字體變粗變大加寬
<H4> ● 四級標題標記 將字體變粗變大加寬
<H5> ● 五級標題標記 將字體變粗變大加寬
<H6> ● 六級標題標記 將字體變粗變大加寬
<FONT> ● 字形標記 設定字形、大小、顏色 反對
<BASEFONT> ○ 基準字形標記 設定所有字形、大小、顏色 反對
<BIG> ● 字體加大 令字體稍為加大
<SMALL> ● 字體縮細 令字體稍為縮細
<STRIKE> ● 畫線刪除 為字體加一刪除線 反對
<CODE> ● 程式碼 字體稍為加寬如<TT>
<KBD> ● 鍵盤字 字體稍為加寬,單一空白
<SAMP> ● 範例 字體稍為加寬如<TT>
<VAR> ● 變數 斜體效果
<CITE> ● 傳記引述 斜體效果
<BLOCKQUOTE> ● 引述文字區塊 縮排字體
<DFN> ● 述語定義 斜體效果
<ADDRESS> ● 地址標記 斜體效果
<SUB> ● 下標字 下標字
<SUP> ● 上標字 指數(平方、立方等)
清單標記
<OL> ● 順序清單 清單項目將以數字、字母順序排列
<UL> ● 無序清單 清單項目將以圓點排列
<LI> ○ 清單項目 每一標記標示一項清單項目
<MENU> ● 選單清單 清單項目將以圓點排列,如<UL> 反對
<DIR> ● 目錄清單 清單項目將以圓點排列,如<UL> 反對
<DL> ● 定義清單 清單分兩層出現
<DT> ○ 定義條目 標示該項定義的標題
<DD> ○ 定義內容 標示定義內容
表格標記
<TABLE> ● 表格標記 設定該表格的各項參數
<CAPTION> ● 表格標題 做成一打通列以填入表格標題
<TR> ● 表格列 設定該表格的列
<TD> ● 表格欄 設定該表格的欄
<TH> ● 表格標頭 相等於<TD>,但其內之字體會變粗
表單標記
<FORM> ● 表單標記 決定單一表單的運作模式
<TEXTAREA> ● 文字區塊 提供文字方盒以輸入較大量文字
<INPUT> ○ 輸入標記 決定輸入形式
<SELECT> ● 選擇標記 建立 pop-up 卷動清單
<OPTION> ○ 選項 每一標記標示一個選項
圖形標記
<IMG> ○ 圖形標記 用以插入圖形及設定圖形屬性
連結標記
<A> ● 連結標記 加入連結
<BASE> ○ 基準標記 可將相對 URL 轉絕對及指定連結目標
框架標記
<FRAMESET> ● 框架設定 設定框架
<FRAME> ○ 框窗設定 設定框窗
<IFRAME> ○ 頁內框架 於網頁中間插入框架 IE
<NOFRAMES> ● 不支援框架 設定當瀏覽器不支援框架時的提示
影像地圖
<MAP> ● 影像地圖名稱 設定影像地圖名稱
<AREA> ○ 連結區域 設定各連結區域
多媒體
<BGSOUND> ○ 背景聲音 於背景播放聲音或音樂 IE
<EMBED> ○ 多媒體 加入聲音、音樂或影像
其他標記
<MARQUEE> ● 走動文字 令文字左右走動 IE
<BLINK> ● 閃爍文字 閃爍文字 NC
<ISINDEX> ○ 頁內尋找器 可輸入關鍵字尋找於該一頁 反對
<META> ○ 開頭定義 讓瀏覽器知道這是 HTML 文件
<LINK> ○ 關系定義 定義該文件與其他 URL 的關系
StyleSheet
<STYLE> ● 樣式表 控制網頁版面
<span> ● 自訂標記 獨立使用或與樣式表同用
註:
● 表示該標記屬圍堵標記,即需要關閉標記如 </標記>。
○ 表示該標記屬空標記,即不需要關閉標記。
IE 表示該標記只適用於 Internet Explorer。
NC 表示該標記只適用於 Netscape Communicator。
反對 表示該標記不為 W3C 所贊同,通常這標記是 IE 或 NC 自訂,且己為眾所支 持,只是 HTML 標准中有其它同功能或更好的選擇。
棄用 表示該標記己為 W3C 所棄用,是過時的標記,但 HTML 具向下兼容的特 性,不用擔心新瀏覽器不支援舊標記。
新 表示該標記是 HTML 4.0 中新增的。
⑦ 如何製作icon-fontweb字體ttf
使用icon font來生成圖標相對於基於圖片的圖標來說,有如下的好處: 1.自由的變化大小 2.自由的修改顏色 3.添加陰影效果 4.IE6也可以支持 5.支持圖片圖標的其它屬性,例如,透明度和旋轉等等