@font-face { font-family: 'OpenSans'; src: url("../fonts/open-sans-v15-latin-regular.woff2") format('woff2'), url("../fonts/open-sans-v15-latin-regular.woff") format('woff'), url("../fonts/open-sans-v15-latin-regular.eot") fo…

CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 display:flex; 设置属性来调整此盒子的子元素的布局方式:如 flex-direction: 明确主侧轴及方向 可互换主侧轴,也可改变方向 各属性: 设置主轴方向 a)  flex-direction:row(默认属性) row:从左往右 b)  flex-direction:row-reverse…

在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局看上去一切OK,但当我们将页面进行放大显示后,你会发现icon图标变得有些模糊,而基于文本的标题依然清晰可见.为了适应各种情况,我们有必要试着解决它: 解决方案:创建双倍大小的Sprite图,然后通过css样式,设置他们只显示二分之一尺寸. 虽然这样的方法让他们在Retina屏上显示的大小是正常的,…

IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器!也可以将SVG图片,转换成web字体 IcoMoon是一项免费的服务,通过使用不同设置使我们能够创建自定义的ICON图或ICON字体.当然了,网站也有资源打包下载!包括大多数流行的免费图标集(在its library里搜索),您可以挑选其中任何一个自己钟意的图标下载.同时,它会提供两种下载方式:图片版和字体版! 图片版是经过CSS Sprites技术处理的PNG格式,字体版有多种格式供我们选择(EOT,SVG,WOFF,TT…

1.WEB字体可以使用一系列文件类型,下面介绍三种字体类型: (1)内嵌OpenType (2)TrueType和OpenType台式机使用的标准字体文件类型 (3)WEB开放字体格式. 2.构造子集:节省页面重量的一种方法是构造子集,构造子集是通过仅包含确定使用字符削减实际字体大小的方法. 3.在网站上使用Web字体有两种方式:自托管和Web字体服务. (1)自托管Web字体来源于你自己的服务器,就像其他的资源一样.如果需要与字体相关的花费也是一次性的购买支出. (2)Web字体服务:通常提供…

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.动画 1.创建…

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

WEB字体 语法 @font-face{ font-family:""; src:url() format() ... } 兼容性写法 @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('wo…

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

之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family. 该篇文章基本没有太多移动端的字体选择及分析.并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文. 正文从这里开始. 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下.看了一下一些比较出名的网站移动端的 font-family: 天猫:font-family: "PingFang SC",miui,system-ui…