http://www.fontsquirrel.com/fontface @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。 首先我们一起来看看@font-face的语法规则： @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } 取值说明 YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径； format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等； weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。 兼容浏览器 说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念： 一、TureTpe(.ttf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】； 二、OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】； 三、Web Open Font Format(.woff)格式： .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】； 四、Embedded Open Type(.eot)格式： .eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】； 五、SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。 这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。 为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
|
1 2 3 4 5 |
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ } |
但为了让各多的浏览器支持，你也可以写成：
|
1 2 3 4 5 6 7 8 |
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } |
说了这么多空洞的理论知识，大家一定有点心痒痒了，那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如我们有一个这样的DOM标签，需要应用自定义字体： HTML Code: <h2 class="neuesDemo">Neues Bauen Demo</h2> 通过@font-face来定义自己的Web Font: @font-face { font-family: 'NeuesBauenDemo'; src: url('../fonts/neues_bauen_demo-webfont.eot'); src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format(’embedded-opentype'), url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); font-weight: normal; font-style: normal; } 我在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去： h2.neuesDemo { font-family: 'NeuesBauenDemo' } 效果： 看到上面的效果，我想大家会感到@font-face很神奇，同时也想争着做做看，可是一动手才发现，特殊字体我要怎样才能得到，那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢？有些朋友可能就不知道如何运手了，那么我们就带着这些问题来一个全程完成的实例吧： 一、获取特殊字体： […]
View Details新的一年刚刚开启， Zing 设计团队认为这是一个很好的时间来回顾 2013 年 web 的设计场景，同时也对 2014 的 web 设计趋势做了些分析，总结出了十大网页设计趋势和预测，希望能给大家一些启发：） 1. 大背景图片 大背景图片（Large hero areas），是从印刷设计中借来的专业术语，指包含少量文字内容、位于网站顶部的图片。在很多网站上，你可以发现现 在 web 设计师们放弃曾经喜欢滑块轮播设计风格，转向了大背景图片设计风格，以大标题为中心，并配以简单模糊的图片为背景，有的则是精心设计的插图，可以前往Lateral inc 和 Focus Lab 查看漂亮的典型示例。 从滑块轮播到大背景图片的转换最大的原因就是大背景图片更能抓住用户的注意力，吸引他们继续探索网站的其他页面。这个趋势越来越流行，并且没有丝毫停顿的节奏，这必将是 2014 年 web 设计的潮流与大趋势！ 2. 更多视频内容 越来越多的网页使用视频替代文字去诠释新技术新概念，随着 YouTube 和 Kickstarter 越来越流行，互联网用户也更倾向于观看视频而不是阅览文字。有更好的方式为什么不去使用？视频提供独特的文字和图片组合，能在短时间内更好的传达新的想 法。很重要的一点，视频也能帮助提升在搜索引擎的排名，例如 Google。 有人会说，视频会消耗很多内存空间和流量，但是当今科技发展迅速，带宽限制在不断提高，允许快速的下载和提供大量的流量。所以就目前而言，视频绝对是 2014 年持续增长的趋势。同时，另外一个有趣的地方是，很多网站已经趋向于自己保管，管理和控制视频，而不再是依赖于 youtube 上面的视频了。 3. 扁平化 UI 设计 她的大名就是摇晃，这么说当然有充分的理由。扁平化 UI 设计拿到了 skeuomorphic design 的宝座，这是一个新数字世界的入门指引。现在我们理解了庞大的互联网世界是怎么工作的，我们就需要抛开废弃的东西——现在是时候抛开一切外物来单纯的讨论根源了。 扁平化 UI 也许是跳过 skeuomorphic 时期的开发者第一次接触的 web 设计风格。大多数是通过 iPad 或者是电子阅读器来接触扁平化 UI 设计的，也可能是当他们拿到他们的第一部智能手机的时候，就如同 UX 和 UI 设计者知道也确信新用户可以在应用商店接触到扁平化的设计。 去年，曾预测Apple将会动摇其拟真设计（Skeuomorphism）。iOS7的发布带来了所谓的“扁平化设计”，该设计丢弃了阴影及渐变效果，使 某些元素获得了视觉上的升级。 长期以来，Apple一直引领着设计的时代潮流，它所做的任何事情，都会引来世界的追随。iOS7发布不久，每天都会有很多具有“扁平化设计”风格的网站 上线。早期的扁平化 UI 设计开始时有很多创新的空间，所以在 2014 年，我们预测 web 设计风格将会更直观，简单，界面平面化！ 4. 更简单的导航和空白使用 扁平化 UI 设计的引入给网站创建了空白的区域，没错，就是空白。空白空间提供了清晰简洁的风格，使网页更容易保留，而且提高可读性。这里是一些很受欢迎的空白使用示例： Exposure, Hello Monday 和FoundryCo. 创建这些空白空间的时候，我们也注意到了页面导航和侧边栏。页面导航会变得更简单，侧边栏可能会在某些时候被放弃。设想一下：你正在阅读一篇整齐、悦目， 没有任何其他干扰信息的文章。设计师通过去除那些分散用户注意力及扩展性的内容，努力打造更愉悦的阅读体验。这种是一种极受欢迎的改变，一种用户期望继续 保持的趋势。在 2014 年，我们预测更多的网页将会变得更简洁并且会更好的使用空白区域。 FoundryCo 的白色空间使用 5. 朴素的视差效果 web 视差效果设计创建了一种 […]
View Details