自定義網頁字型

2022-02-11 16:55:56 字數 1148 閱讀 3520

在自定義這個部落格主題過程中使用了某些特定字型,

這些字型並非作業系統的內建字型,

這樣使用者在瀏覽頁面的時就有可能看不到設計時效果,

導致頁面顯示很醜陋.

一般的解決辦法是把文字型成,

但是有點麻煩, 不適合我的樣的懶人,

而且做成也不方便修改.

還有一種是通過css樣式定義,

我選擇了這種, 因為它簡單易用.

css中使用@font-face屬性來實現在網頁中嵌入任意字型,

稍稍複雜一點的問題是每種瀏覽器都有自己的字型格式要求。

那麼為了主流的瀏覽器們都能正常顯示必須將字型轉換為以上這些格式才行,

但是這樣就違背了"懶人原則".

[當girl手中的一支棒棒糖就快被搶走時,乙隻hero出現了! "放開那個girl!".. ]

恩, 我們的hero也沒有遲到

該**有很多別人製作完成的字型(適用於主流瀏覽器們的),

解壓後通常會得到*.eot,*.svg,*.ttf,*.woff和stylesheet.css等檔案,

其中*.eot,*.svg,*.ttf,*.woff為字型檔案,

放到自己站點的域空間內。

stylesheet.css為樣式定義(也就是自定義字型部分),

@font-face { 

font-family: 'fontname';       /* 字型名稱,可自己定義 */

src: url('fontname.eot'); 

src: local('fontname regular'),

local('fontname'), 

url('fontname.woff') format('woff'), 

url('fontname.ttf') format('truetype'),  

url('fontname.svg#fontname') format('svg');

將其內容複製到自己的樣式表中就可以了, (注意url部分與自己域空間內字型檔案路徑相匹配)

/* 使用方法 */

hello world!

這樣基本就完成了.

看, 本部落格左上的文字是不是很帥.. :)

如果要製作自己的字型也可以, /generator

但貌似是收費的..  -_-! 

在網頁中自定義字型

最近切圖遇到了,psd文件與網頁字型的衝突。很多字型,系統中都沒有安裝。在同事和網路的幫助下解決了這個問題.發此文以表感謝,外加自我提醒。一 使用google webfont字型,網上資料很多,在這裡就不仔細描述了。二 如果goole字型中沒有,請看下面的方法 大體步驟 ttf或.otf 適用於fi...

Android 自定義字型

今天在工作中遇到乙個很少用到的知識點,怎樣給我們的應用新增特殊字型,因為隨著開發的一步步進步,而字型也成為應用的一部分,好的字型給我們的應用帶來的不僅僅是好的使用者體驗,更是一種享受 下面我就一步一步給大家新增字型 1.首先在res 中新建乙個資料夾assets,在assets中建立新資料夾font...

自定義字型樣式

安卓本身自帶的字型是預設的,要想使用其他好看的字型,就要先準備好字型檔案。下面將介紹如何使用自己的字型。首先在eclipse工程asset資料夾下建立font資料夾,然後將準備好的字型檔案 如test.ttf 放到font資料夾下。接下來只需要一行 就可搞定!為編輯框中的文字設定樣式 自定義字型 e...