• 您的位置 》 網站 》正文
  • youziku有字庫
  • 發布時間: 2015-12-22 來源: http://www.youziku.com 瀏覽:7523

 www.youziku.com是一家專門提供簡體中文在線字體服務的web font平臺, 有字庫秉承著發揚中文字體的理念,使字體廠商和字體制作者的字體能廣泛的發揮其價值, 使廣大網頁設計者能輕松自由的使用各種特效字體,使廣大網民可以在網頁上看到親切、自然、美觀的文字,我們將為此而堅持不懈。

 

有字庫能提供什么服務?

全面的web font服務,主要針對簡體中文。

 

有字庫web font的優勢是什么?

1.         國內首創簡體中文網絡字體(web font)服務,大陸第一家。

2.        極速推送字體:按需截取、字體壓縮、流量分壓

3.        廣泛的瀏覽器支持,用戶使用任何瀏覽器,都無需擔憂

4.        穩定的服務,我們采用國內知名云服務器

5.         使用簡單,it's so easy

簡體中文web font

 

cufon、sIFR、FLIR、@font-face、Google Fonts API、Typekit、fonts.com、fontdeck.com老外開發了N多用于在網頁上嵌入字體的方法和平臺,但遺憾的是中文沒有被很好的支持。

中文字體太大了,整套一般4-10M,一直被認為是不適合做網絡字體,不像英文字符總數最多也就三百個左右,文件大小一般50K左右。

有字庫及時推出了中文網絡字體API服務。通過按需截取和高效壓縮等技術有效地控制了字體文件的大小,使之和英文字體文件大小相當,一樣適合嵌入網頁。

通過有字庫平臺,中文網頁終于也可以像英文那樣輕松的應用網絡字體了。

 

有字庫web font的使用方法:

有字庫web font有三種調用方式,網頁設計者們可以根據實際情況選擇相應的調用方式:

CSS引用方式一行css文件引用代碼即可搞定。

Javascript引用方式一段js腳本即可搞定。

Webservice引用方式根據后臺數據,自動引用css文件,適用于動態網站編程自動化。

 

 

網站地址:www.youziku.com

使用此服務的網站示例:

http://njtxlh.huamushang.com

<a href="http://android.diy.moxiu.com/index.http://android.diy.moxiu.com/index.

 

 ------------------------------------------------------------------------------------

    圖片是網頁美化不可或缺的一種元素,有時作為片段文的載體(即將文字P在圖片上)可大大提高文字閱讀的體驗。    在圖片上配文字。你一定會最先想到Photoshop,沒錯,這是一個很強大的工具。但如果每次圖片上的文字需要改變怎么辦?好辦,把原始圖片找出來,重新用Photoshop處理,完成后上傳替換原圖。    有沒有更簡單易的方法?最好是一勞永逸(一次設計,后面文字再怎么改變都會自動應用樣式)。    有的,在圖片上面加文字層(DIV)…   如果是特殊字體呢(非宋體或微軟雅黑)?也可以實現嗎。在圖片上應用任意字體,文字內容隨意改變不需要再次處理。

    下面介紹一種超炫的方法:web font,可以完美解決這個問題。

 

什么是web font

   web font是把一個放在網絡上的字體文件嵌入到當前網頁上,客戶端瀏覽該網頁時字體顯示效果就像本機安裝了的效果一樣。

   通過嵌入字體來使特殊字體在網頁上也能正常顯示,不用Photoshop處理成圖片。并且文字內容有變動字體也能自動適應。(因此文字內容改變不需要重新P圖了)

   web fontCSS中的@font-face語句來實現的,通常認為web fontCSS3中的一個模塊,其實早在CSS2中就已經有了,連老古董IE6甚至IE4都支持。其他各種瀏覽器包括手機瀏覽器也都完美支持(IE、360、搜狗、火狐、chrome、safari、Opera)。

   所以,任何瀏覽器都能識別@font-face,自動會將@font-face所引用的字體效果渲染到指定位置,所以在網上使用你大可放心其穩定性。

@font-face語句規則

主流瀏覽器都能很好地支持@font-face,但對于嵌入的字體文件的識別,卻是各有各的喜好。

所以在寫@font-face語句之前,需要獲取要使用字體的四種文件格式,確保能在主流瀏覽器中都能正常顯示該字體。

.TTF.OTF,適用于Firefox 、Safari、Opera

.EOT,適用于Internet Explorer 4.0+

.SVG,適用于Chrome、IPhone

.WOFF 知用于Chrome、Firefox

四種格式的文件準備好以后,就可以寫@font-face語句了,格式如下:

@font-face 

{

  font-family: 'fontNameRegular';

  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');

}

在頁面中需要的地方使用該字體:

p { font: 13px fontNameRegular, Arial, sans-serif; } 

h1{font-family: fontNameRegular}

@font-face實現-英文

   英文字體實現@font-face的方法比較成熟,有時候看老外的個人技術博客,經常能遇到。做法相對中文簡單很多,我們在手頭上(或在設計資源站點已經找到)有該字體的某種格式文件,最常見的是.TTF文件,我們需要通過這種文件格式轉換為其余三種文件格式。字體文件格式的轉換可以通過網站FontsQuirrelcodeandmore提供的在線字體轉換服務獲取。

@font-face實現-中文

   @font-face是老外發明的,所以他們從來沒想過中文的情況,中文一套字體一般要3-6M這樣的龐然大物嵌入網頁上,結果可想而知,在頁面加載完成前已經被關掉了。

    當然,不是說中文就無法通過@font-face實現嵌入,但需要再麻煩一步:按需截?。ǜ鶕恼滤婕暗降奈淖稚尚∽謳欤?,如此便能最大程度地節約流量,將字體減到最小。

   日本人發明一種方法:頁面加入一段javascript代碼,每次頁面打開時javascript會適時獲取指定的標簽上的文字,然后發送到字體平臺,字體平臺自動根據文字截取小字庫發送到瀏覽客戶端面嵌入。這樣頁面文字隨時有改動,平臺都能隨時生成新的字體文件。

   在這里推薦一個中文的web font服務平臺"有字庫"。該網站提供這種javascript截取字體的服務,親可以去測試一下。

@font-face效果

我做過相關測試,效果非常漂亮。

 因為是截取成小字庫,所以字體文件很?。ū葓D片還?。?,頁面打開速度非???。

  最重要的是,我的網站是動態網站,圖片上的文字是被后面數據控制的,經常會有變動,如果文字每次改動我都要重新提交圖片,一定累死,并且還無法知道文字什么時候改動。

  應用web font服務以后我就完全可以放手了,圖片上的文字再也不用我多費心了,效果猶如photoshop處理出來的一樣。

 

 

 

 

制作網頁時如何使用特殊字體

 

 

    對于網站制作者&前端老濕們來說,為了確保顯示效果,長期以來不得不一直使用“安全字體”,英文網站一律是 Verdana,中文網站一律是宋體——因為這是每臺瀏覽網頁的電腦里肯定裝有的字體。

這是設計理念不斷進步的UI老師們所不能容忍的。字體可是頁面效果的根本,好比T臺模特的衣服換了千萬種,但你只能用這一兩個模特(對于中文用戶那就幾乎只有一個宋體)?如何才能在網頁上應用豐富的字體效果?

特殊字體應用方案

目前方案無非三種:

1.                              客戶打開網頁的時候,提示客戶安裝該字體。

2.                              制作圖片嵌入網頁。

3.                              把字體嵌入到網頁中(通過上傳字體文件到指定目錄,讓CSS引用顯示)。

第一種方案明顯存在弊端,用腳本程序去識別客戶端是否含有該字體,加重程序的負載量。而且嚴重影響用戶的體驗。效果最次!

第二種方案生成圖片,網頁加載慢,不利于百度收錄,效果差!

第三種方案流量小加載速度快,效果最好!

   第三種方案就是指網絡字體(web font,也被稱為“網頁內嵌字體”或“網頁外調字體”),通過上傳字體文件到指定目錄,然后在CSS中用規定格式進行引用就可以使字體效果躍上你的頁面了,使網頁用字不再受瀏覽客戶端的影響。

網絡字體與瀏覽器支持

   網絡字體是靠CSS中的@font-face語句來實現的,通常認為網絡字體是CSS3中的一個模塊,其實早在CSS2中就已經有了,連老古董IE6甚至IE4都支持。其他和種瀏覽器包括手機瀏覽器也都完美支持(IE、360、搜狗、火狐、chrome、safari、Opera)。  

網絡字體使用方法

   各種瀏覽器都支持@font-face語句,但嵌入的字體文件卻是各自為政。要想使所有瀏覽器都能正常顯示,那你就得準備各種格式的字體文件進入嵌入(.eot、.woff、.svg、.ttf)。

   可以將字體上傳到FontSquirrel上,自動生成所需要的所有格式。然后將文件上傳到空間,然后根據@font-face語句規范進行引用。

中文網絡字體使用方法

   中文字體要注意一下,因為中文字體不同于英文,一套中文字體一般4-6M如果整套嵌入的話,沒有多少瀏覽者會有耐心等到字體加載完,在加載完之前已經關閉頁面了。

   所以中文字體需要事先進行截取,根據文章內容涉及到的字進行截取,截取后的小字體方可嵌入使用。

沒錯中文確實太麻煩了,這也是為什么英文網頁使用網絡字體那么多,中文卻很少遇到。

第三方平臺簡易操作

  要準備各種格式的文件操作起來太麻煩了,尤其中文還要截取小字庫。

沒有專業的工具就很難實現了,不過不用擔心,如果借助于第三方平臺,這一切就易如反掌。

  現在網上已經出現一些很好的平臺。如英文的typekit、fontdeck、google font等,中文的“有字庫”youziku.com等,都可以大大方便網絡字體的使用。


 有字庫主要針對中文網絡字體引用,使用方法主要有兩種:

1.                              CSS方式

選定字體后,需要提交文章內容,網站會根據文章內容截取成小字庫,自動生成各種格式的字體文件(.eot、.woff、.svg、.ttf),并返回一個css文件引用的Link標簽,只需要將此Link標簽引入頁面的head標簽中即可,最后別忘了在引用網絡字體的標簽上設置class。

2.                              javascript方式

選定字體后,網站會提供給你一段javascript腳本,不需要提交文章,直接將腳本引入</body>之后</html>之前,就可以了,腳本會自動根據當前文章內容生成各種格式的字體文件,并嵌入到當前頁面。

 

 

 

 

@font-face語句如何嵌入中文字體 

 

 

什么是@font-face

    @font-face是一種網絡字體,是CSS的模塊,利用CSS@font-face屬性可以在網頁中嵌入任意字體。

    字體使用是網頁設計中不可或缺的一部分。網頁是文字的載體,我們希望在網頁中使用某一特定字體,但是該字體并非主流操作系統的內置字體,這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。

   美工設計師最常做的辦法是把想要的文字做成圖片,這樣做有幾個明顯缺陷:  一、不可能大范圍的使用該字體;  二、圖片內容相對使用文字不易修改;  三、不利于網站SEO?! 【W絡上有一些使用sIFR技術、或javascript/flash hack的方法,但實現起來或繁瑣,或有缺陷。而只有通過CSS@font-face屬性來實現在網頁中嵌入字體的方法逐漸成為主流。

@font-face語句規則

主流瀏覽器都能很好地支持@font-face,但對于嵌入的字體文件的識別,卻是各有各的喜好。

所以在寫@font-face語句之前,需要獲取要使用字體的四種文件格式,確保能在主流瀏覽器中都能正常顯示該字體。

·                                 .TTF.OTF,適用于Firefox 、Safari、Opera

·                                 .EOT,適用于Internet Explorer 4.0+

·                                 .SVG,適用于Chrome、IPhone

·                                 .WOFF 知用于Chrome、Firefox

四種格式的文件準備好以后,就可以寫@font-face語句了,格式如下:

@font-face 

{

  font-family: 'fontNameRegular';

  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');

}

在頁面中需要的地方使用該字體:

p { font: 13px fontNameRegular, Arial, sans-serif; } 

h1{font-family: fontNameRegular}

@font-face實現-英文

   英文字體實現@font-face的方法比較成熟,有時候看老外的個人技術博客,經常能遇到。做法相對中文簡單很多,我們在手頭上(或在設計資源站點已經找到)有該字體的某種格式文件,最常見的是.TTF文件,我們需要通過這種文件格式轉換為其余三種文件格式。字體文件格式的轉換可以通過網站FontsQuirrelcodeandmore提供的在線字體轉換服務獲取。

@font-face實現-中文

    @font-face是老外發明的,所以他們從來沒想過中文的情況,中文一套字體一般要3-6M這樣的龐然大物嵌入網頁上,結果可想而知,在頁面加載完成前已經被關掉了。

    當然,不是說中文就無法通過@font-face實現嵌入,但需要再麻煩一步:按需截?。ǜ鶕恼滤婕暗降奈淖稚尚∽謳欤?,如此便能最大程度地節約流量,將字體減到最小。

    可以在網上下載fontcreatorUnicode碼來找到需要的字,保留需要的字其他的全刪掉。

   確實麻煩。有沒有更快一點的方法?有的?。?!

英文比較專業的有 TypeKit.comfontdeck.com

中文比較專業的有 youziku.com(有字庫)

中文的用起來還是比英文的麻煩,英文的直接引用就可以了,整套字體被嵌入網頁速度也不受影響(一般英文一般一百多K),中文的無論如何都要先截取一下的。

    不過好在"有字庫"網站功能還挺人性化,所有瀏覽器支持的格式(.EOT.TTF.WOFF.SVG)都自動為你生成好,你只需要提交你需要的字就可以了。甚至還有一種js方式,只需要引用一段js代碼,不需要提交文字就能自動根據文章生成小字庫了。非常方便。如果你想用中文@font-face那我推薦"有字庫"。

不可濫用@font-face

  凡事講究度,網頁上的美化小技巧,就像做菜放的調味料,放一點美味,放多了就反胃了。

  @font-face也是如此,如果在頁面上大面積應用,頁面體驗反而會下降,親自已斟酌吧。



字體管家
福建11选5手机版