一.Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low.   图标 在写这篇文章之前,我一直以为上图中的“图标”是一个个的图片组成,但学习总是给人新知,现在我知道了它们只是一种字体,类似于“宋体”.“楷体”这种.如果我们要使用它们,也只需要在 css 文件中使用 @font-face 引入这种字体即可.@font-face 是 css3 的一个语法,刚兴趣的可以自行阅读 @font-face 用法 .…

而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格. 字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG. TrueType Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性.同时,这类字体和矢量字体一样可以随意缩放.旋转而不必担心会出现锯齿. EOT – Embedded Ope…

一.问题 在IIS上部署网站,网页引用woff字体时,浏览器报“找不到woff.woff2字体”.“404”错误,不仅预设的字体加载不出来,还影响网页加载速度. 二.原因 IIS默认设置情况下不识别.WOFF..WOFF2..SVG这几个后缀的文件. 三.解决方法 在IIS上添加(.WOFF..WOFF2..SVG)MIME类型. 三.操作 1.打开IIS,找到“MIME 类型”. 2.按顺序操作:“MIME 类型”->“添加”->添加三条: 文件扩展名MIME 类型 .woffapplica…

IIS添加MIME类型: 文件扩展名 MIME类型 .svg     image/svg+xml.woff   application/x-font-woff.woff2 application/x-font-woff.eot    application/vnd.ms-fontobject.otf      application/octet-stream.ttf      application/octet-stream 更多mime请看https://www.cnblogs.com/kar…

网站地址:http://www.fontsquirrel.com/tools/webfont-generator(还可以缩小字体文件大小,强烈推荐) ttf转换成eot格式的字体软件:EOTFAST.exe,直接将ttf文件拖拽到exe文件中运行就可以了,下载地址http://download.csdn.net/detail/u010488325/6235387…

CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位. CSS Sprites加速的关键,不是降低质量,而是减少个数. 做成Sprites的很大的原因是图片流量大,想象一下,如果将一些小图片做成字体模式进行显示,会不会很神奇呢?随着CSS3对字体…

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上. 您“自己的”的字体是在 CSS3 @font-face 规则中定义的. @font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <source> [<f…

手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏览器? ie.百度.360.搜狗.火狐.欧朋.Chrome.谷歌.行者无疆.财猫省钱.遨游.Wise光速.UC.智慧.QQ.海豚...(大概有70-80多种) 五花八门,还好不用担心这都是表象.虽然浏览器各不相同但从浏览器…

移动端开发总结     目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 7.移动端框架和库 手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo…

Google Web font在国内经常不稳定,速度在国内延迟也很高,而引发网页打开速度慢. 一.常见的字体格式介绍 不同的浏览器对字体格式支持是不一致的,常见的如下: 1.TureTpe(.ttf): .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有[IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+]: 2.OpenType(.otf): .otf字…

reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使用这个种子项目https://github.com/tianxiangbing/react-seed reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推…

很长时间,web设计师总是得用一些“web-safe”字体,英文用body{font-family:"corbel", Arial, Sans-serif;  }中文用body{font-family:"微软雅黑" }现在@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 原理是:字体文件放到web服务器,在需要的时候被自动下载到用户的计算机上. 一.@font-face介绍 语法: @font-face { font-fa…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font-face这个功能早在IE4就支持了,比如说首页的Logo,Tags以及页面中的手写英文体这些都可以用@font-face来实现了. 首先我们一起来看看@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <sou…

一:字体的下载(http://www.dafont.com/new.php) 二:选择需要的字体并下载( Download ) 三:下载后并解压 四:获取@font-face所需要字体的格式.eot,.woff,.ttf,.svg,需要第三方工具来实现(网址:https://www.fontsquirrel.com/tools/webfont-generator) 五:所需字体下载完成并解压 六:目录结构 七:自定义字体样式: 八:HTML结构 九:效果…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo…

优先级 z-index 不设置 或auto   非static z-index :0 : z-index:-1: opacity 与层叠上下 opacity:.9 对其影响  小于1值   不具备堆叠属性 css sprite 前景背景均可使用 line  box font-size:0; vertical-align: middle; inline level   table level html  body 设置背景色 满屏 position:absolute;  top:0; left:0…

@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体.[微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式.然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了. @font-face的语法规则: @font-face { font-family: <YourWebFo…

Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解css. 一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Arial”.“Times New Roman”.“宋体”.“黑体”等;font-style(字体…

本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使…

@font-face语法规则 @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } 说明: YourWebFontName:此值指的就是你自己定义的字体名称.最好是使用你下载的默认字体.他将被…

module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader?minimize'] } ] } 一.入门 loader可以看作是翻译员,配置module.rules数组里的规则,告诉webpack遇到哪些文件使用哪些loader去加载和转换. 如上的话就是告诉webpack当遇到.css文件后先采用css-loader,再由style-loader将css的内容注入javascript里,是由后往前的. 每个loade…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo…

Module module 配置如何处理模块. 配置 Loader rules  配置模块的读取和解析规则,通常用来配置 Loader.其类型是一个数组,数组里每一项都描述了如何去处理部分文件. 配置一项 rules 时大致通过以下方式: 条件匹配:通过  test . include . exclude  三个配置项来命中 Loader 要应用规则的文件. 应用规则:对选中后的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loade…

深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpack? 4. 使用loader 5. 使用插件(Plugin) 6. 使用DevServer 二:webpack基本配置 1. context 2. entry 3. Output 4. 模式(mode) 5.理解使用Loader 6.理解noParse 7. 理解alias 8.理解extensi…

参考链接http://www.w3cplus.com/content/css3-font-face 出处W3CPLUS css3-自定义字体   @font-face @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就…

之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求(如果在多处使用的话),即使合并所有图片,也不好管理,灵活性不高,哪一天想换种更好看的字体,那工作量,想想都没劲!幸好CSS3新增了@font-face模块,可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个@font-face只能定义一种,若需要多个字体就启用多个@font-face规则. @font-fa…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo…