当前位置:
首页 > 网站分类 > 在线应用 > 【有字库】专为网页设计师提供在线字体,直接引用、无需下载

【有字库】专为网页设计师提供在线字体,直接引用、无需下载

网站名称:

有字库

网站热度:4884°C     0 人喜欢
2015-11-13_20532900

有字库是一家专门提供简体中文在线字体服务的web font平台, 有字库秉承着发扬中文字体的理念,使字体厂商和字体制作者的字体能广泛的发挥其价值, 使广大网页设计者能轻松自由的使用各种特效字体,使广大网民可以在网页上看到亲切、自然、美观的文字。

 【有字库】专为网页设计师提供在线字体,直接引用、无需下载

有字库能提供什么服务?

全面的web font服务,主要针对简体中文。

 

有字库web font的优势是什么?

  1. 国内首创简体中文网络字体(web font)服务,大陆第一家。
  2. 极速推送字体:按需截取、字体压缩、流量分压
  3. 广泛的浏览器支持,用户使用任何浏览器,都无需担忧
  4. 稳定的服务,我们采用国内知名云服务器
  5. 使用简单,it's so easy

简体中文web font

 

cufonsIFRFLIR@font-faceGoogle Fonts APITypekitfonts.comfontdeck.com老外开发了N多用于在网页上嵌入字体的方法和平台,但遗憾的是中文没有被很好的支持。

中文字体太大了,整套一般4-10M,一直被认为是不适合做网络字体,不像英文字符总数最多也就三百个左右,文件大小一般50K左右。

有字库及时推出了中文网络字体API服务。通过按需截取和高效压缩等技术有效地控制了字体文件的大小,使之和英文字体文件大小相当,一样适合嵌入网页。

通过有字库平台,中文网页终于也可以像英文那样轻松的应用网络字体了。

 

有字库web font的使用方法:

有字库web font有三种调用方式,网页设计者们可以根据实际情况选择相应的调用方式:

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

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

Webservice引用方式根据后台数据,自动引用css文件,适用于动态网站编程自动化。

 

 

网站地址:www.youziku.com

 

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

    图片是网页美化不可或缺的一种元素,有时作为片段文的载体(即将文字P在图片上)可大大提高文字阅读的体验。    在图片上配文字。你一定会最先想到Photoshop,没错,这是一个很强大的工具。但如果每次图片上的文字需要改变怎么办?好办,把原始图片找出来,重新用Photoshop处理,完成后上传替换原图。    有没有更简单易的方法?最好是一劳永逸(一次设计,后面文字再怎么改变都会自动应用样式)    有的,在图片上面加文字层(DIV)…   如果是特殊字体呢(非宋体或微软雅黑)?也可以实现吗。在图片上应用任意字体,文字内容随意改变不需要再次处理。

    下面介绍一种超炫的方法:web font,可以完美解决这个问题。

 

什么是web font

   web font是把一个放在网络上的字体文件嵌入到当前网页上,客户端浏览该网页时字体显示效果就像本机安装了的效果一样。

   通过嵌入字体来使特殊字体在网页上也能正常显示,不用Photoshop处理成图片。并且文字内容有变动字体也能自动适应。(因此文字内容改变不需要重新P图了)

   web fontCSS中的@font-face语句来实现的,通常认为web fontCSS3中的一个模块,其实早在CSS2中就已经有了,连老古董IE6甚至IE4都支持。其他各种浏览器包括手机浏览器也都完美支持(IE360、搜狗、火狐、chromesafariOpera)

   所以,任何浏览器都能识别@font-face,自动会将@font-face所引用的字体效果渲染到指定位置,所以在网上使用你大可放心其稳定性。

@font-face语句规则

主流浏览器都能很好地支持@font-face,但对于嵌入的字体文件的识别,却是各有各的喜好。

所以在写@font-face语句之前,需要获取要使用字体的四种文件格式,确保能在主流浏览器中都能正常显示该字体。

.TTF.OTF,适用于Firefox SafariOpera

.EOT,适用于Internet Explorer 4.0+

.SVG,适用于ChromeIPhone

.WOFF 知用于ChromeFirefox

四种格式的文件准备好以后,就可以写@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截取字体的服务,亲可以去测试一下。

快速访问网站:【有字库】
「淘小众」版权所有丨如未注明 , 均为原创
更多精品网站请访问【小众实用导航】

探索互联网世界,收集和分享实用互联网资源,推荐国内和国外知名、实用、创新、科技、优质的站点资源!互联无极限,探索无止境;分享求真知,网络无国界!

【有字库】专为网页设计师提供在线字体,直接引用、无需下载:等您坐沙发呢!

发表评论

表情
还能输入210个字

TOP