xml地图|网站地图|网站标签 [设为首页] [加入收藏]
H5页面快速搭建之高级字体应用实践,的常用方法
分类:web前端

H5页面非常的慢搭建之高档字体采行

2016/04/15 · HTML5 · 字体

原稿出处: 天猫前端团队(FED)- 龙驭   

图片 1

模仿 1px 的常用方法及优短处

2015/07/27 · CSS · 1px

初稿出处: 百度EFE - wxpuker   

直白以来大家兑现边框的方法都以安装 border: 1px solid #ccc,但是在retina屏上因为设备像素比的不及,边框在运动设备上的展现也不均等:1px只怕会被渲染成1.5px, 2px, 2.5px, 3px....,在客商体验上略差,所以以后要消除的难点正是在retina显示器完成1px边框。

风流浪漫经你去google临近主题素材,诚然会找到所谓的”答案“,然后很开森的行使项目中了。运气好的话,Yeah成功臣范例拟1px了,运气不好了大概碰着各个奇葩的显现让您抓狂。

那篇小说总括了当前常用的模仿1px的章程,并深入分析各类艺术的优弱点。

风趣的CSS题目(13):玄妙地创制背景象渐变动画!

2017/03/24 · CSS · CSS, 动画

正文小编: 伯乐在线 - chokcoco 。未经小编许可,禁绝转发!
接待出席伯乐在线 专辑审核人。

一些时候,嗯,应该说一些特定地方,我们可能需求上边那样的卡通效果,渐变 + animation :

图片 2

若果我们渐变的写法如下:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); }

1
2
3
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
}

依据正规主张,同盟 animation ,我们首先会想到在 animation 的手续中经过转移颜色实现颜色渐变动画,那么大家的 CSS 代码大概是:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); animation: gradientChange 2s infinite; } @keyframes gradientChange { 100% { background: linear-gradient(90deg, #e91e1e 0%, #6f27b0 100%); } }

1
2
3
4
5
6
7
8
9
10
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);
    animation: gradientChange 2s infinite;
}
 
@keyframes gradientChange  {
    100% {
        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);
    }
}

位置我们用到了三种颜色:

  • #ffc700 黄色
  • #e91e1e 红色
  • #6f27b0 紫色

终极,并不曾大家预料的结果,而是那样的:

图片 3

See the Pen 线性渐变动画 by Chokcoco (@Chokcoco) on CodePen.

咱俩预料的补间动画,形成了逐帧动画。 图片 4

也等于说,线性渐变是不援助动画 animation 的,那独有的由三个颜料,变化到其余二个颜料吗?像上边那样:

div { background: #ffc700; animation: gradientChange 3s infinite alternate; } @keyframes gradientChange { 100% { background: #e91e1e; } }

1
2
3
4
5
6
7
8
9
10
div {
    background: #ffc700;
    animation: gradientChange 3s infinite alternate;
}
 
@keyframes gradientChange  {
    100% {
        background: #e91e1e;
    }
}

发觉,单纯的单色值是足以发生渐变的:

See the Pen 单色值渐变动画 by Chokcoco (@Chokcoco) on CodePen.

背景

  • 近几年在支付八个 H5 活动页飞速搭建平台,能够透过拖拽编辑图片,文字等成分组件,飞快搭建出一个平移端的活动页面,基本交互和产品效果相似PPT 软件。那类活动多量在微信等楼台上传出,在那之中会蕴藏种种卡通和特效,而各种高档艺术字体(如:方正陶然亭黑,方正彩云,方正大草,方正剑体等)的使用也非凡广阔。
  • 事先用户只可以通过 ps 等软件将文字转化为图片再贴到平台上运用。使用开销超高,更正,调节和测量试验都丰盛狼狈,况且图片占用的财富也正如多,为了裁减客商的使用花费,基于一条龙搭建的观点,大家要求将高档字体的采取透明化,使客户和接纳PPT 相似直接选择字体接纳就能够。

实现方案

So

小结一下,线性渐变(径向渐变)是不接济 animation 的,单色的 background 是永葆的。

探寻了下文书档案,在 background 周边区域截图如下:

图片 5

什么样 CSS 属性能够动画?,上面包车型客车截图是缺损的协理CSS 动画的习性,完整的能够戳左侧。

对于 background 相关的,文书档案里写的是协助 background 可是没有前述不扶助 background: linear-gradient()/radial-gradient() 。推断原因,只怕是由于渐变中参预 animation 的更动对过于消耗质量。

那正是说是还是不是大家想要的背景观渐变动画就不恐怕完成了呢?上面我们就分流下观念看看有未有任何措施能够高达大家的对象。

技巧选型

  • 率先种方案是经过顾客输入的文字,和采用的字体,通过劳动器生成对应的图形来使用。这种方案的优点是逻辑轻巧,劣点是搭建/改良时扩展了复杂度,调试时敬谢不敏实时预览文字在活动中的效果。并且便于并发大批量冗余图片,最后页面包车型大巴图片央求也会大增。
  • 其次种方案是调用 iconfont.cn 的服务接口,通过传递字体和文字内容来赢得字体文件。这种方案的优点是足以平素利用现存成熟平台,开辟花费低,可信。短处是增添了表面依赖,不但面对同盟方合营的界定,而且不可能自动决定可供的抉择字体等。
  • 末尾使用的的第三种方案是一向选取 iconfont.cn 的 Node.js 模块 (font-carrier) ,自行深入分析/生成字体,将转变的书体放在大家温馨报名的 OSS 中蕴藏使用。这种艺术的开拓量最大,且要消耗额外的 OSS 能源,但是全体流程一生一世,能够穿梭定制优化,自行增加字体等,由于大家的服务只面向移动端,所以只须要改变ttf 也许 woff 风度翩翩种文件类型就能够包容。

1、软图片

‘软图片’,即通过CSS渐变仿照,代码如下:

CSS

.retina(@top: transparent, @right: transparent, @bottom: transparent, @left: transparent, @w: 1px) { @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { border: none; background-image: linear-gradient(180deg, @top, <a href='; 50%, transparent 50%), linear-gradient(270deg, @right, @right 50%, transparent 50%), linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%), linear-gradient(90deg, @left, @left 50%, transparent 50%); background-size: 100% @w, <a href='; 100%, 100% @w, <a href='; 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.retina(@top: transparent, @right: transparent, @bottom: transparent, @left: transparent, @w: 1px) {
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
        border: none;
        background-image:
            linear-gradient(180deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
            linear-gradient(270deg, @right, @right 50%, transparent 50%),
            linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%),
            linear-gradient(90deg, @left, @left 50%, transparent 50%);
        background-size: 100% @w, <a href='http://www.jobbole.com/members/whch0919'>@w</a> 100%, 100% @w, <a href='http://www.jobbole.com/members/whch0919'>@w</a> 100%;
        background-repeat: no-repeat;
        background-position: top, right top,  bottom, left top;
    }
}

这段代码或然是从网络找到的面世最频仍的代码了,可是那样写是有宽容难题的,

测验金立2自带浏览器、手提式有线话机百度、百度浏览器都展现不出下边框,如图:

图片 6

测量检验HTC2 chrome浏览器符合规律,如图:

图片 7

这种情形大家会思量是或不是从未有过写浏览器前缀-webkit-的开始和结果,好,我们抬高:

CSS

background-image: -webkit-linear-gradient(180deg, @top, <a href='; 50%, transparent 50%), -webkit-linear-gradient(270deg, @right, @right 50%, transparent 50%), -webkit-linear-gradient(0, @bottom, @bottom 50%, transparent 50%), -webkit-linear-gradient(90deg, @left, @left 50%, transparent 50%);

1
2
3
4
5
background-image:
     -webkit-linear-gradient(180deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
     -webkit-linear-gradient(270deg, @right, @right 50%, transparent 50%),
     -webkit-linear-gradient(0, @bottom, @bottom 50%, transparent 50%),
     -webkit-linear-gradient(90deg, @left, @left 50%, transparent 50%);

再度检验Motorola2自带浏览器、手提式有线电话机百度、百度浏览器、chrome,这一次表现都相似!慢着近乎某些不对:

图片 8

怎会如此啊??看样子是渐变方向不对,通过调解渐变方向取得结果:加上-webkit私家前缀的0deg的渐变方向是从左向右,而职业定义的0deg的渐变方向是自下而上

精晓开始和结果了,大家再改改代码吧:

CSS

background-image: -webkit-linear-gradient(270deg, @top, <a href='; 50%, transparent 50%), -webkit-linear-gradient(180deg, @right, @right 50%, transparent 50%), -webkit-linear-gradient(90deg, @bottom, @bottom 50%, transparent 50%), -webkit-linear-gradient(0, @left, @left 50%, transparent 50%); background-image: linear-gradient(180deg, @top, <a href='; 50%, transparent 50%), linear-gradient(270deg, @right, @right 50%, transparent 50%), linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%), linear-gradient(90deg, @left, @left 50%, transparent 50%);

1
2
3
4
5
6
7
8
9
10
background-image:
    -webkit-linear-gradient(270deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
    -webkit-linear-gradient(180deg, @right, @right 50%, transparent 50%),
    -webkit-linear-gradient(90deg, @bottom, @bottom 50%, transparent 50%),
    -webkit-linear-gradient(0, @left, @left 50%, transparent 50%);
background-image:
    linear-gradient(180deg, @top, <a href='http://www.jobbole.com/members/ejiboth'>@top</a> 50%, transparent 50%),
    linear-gradient(270deg, @right, @right 50%, transparent 50%),
    linear-gradient(0deg, @bottom, @bottom 50%, transparent 50%),
    linear-gradient(90deg, @left, @left 50%, transparent 50%);

Done!

优点:

  • 能够兑现单个、多少个边框,大小、颜色能够配备
  • 相比较上面介绍的别样措施,那些办法宽容性相比好,完成效果与利益也针锋相投科学

缺点:

  • 很分明代码极其长
  • 不能完成圆角
  • 应用时恐怕须要合作 padding,如设置子成分的背景或然会遮盖父成分所设置的1px软图片
  • 如果有背景颜色,要写成background-color,不然会超大心覆盖掉
  • 对于非 retina 屏,需要写 border: 1px solid #f00 实行适配

经过 background-position 模拟渐变动画

上面什么样 CSS 属性能够动画的截图中,列出了与 background 相关还会有 background-position ,也就是 background-position 是永葆动画的,通过改换 background-position 的章程,能够兑现渐变动画:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%); background-size: 200% 100%; background-position: 0 0; animation: bgposition 2s infinite linear alternate; } @keyframes bgposition { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: bgposition 2s infinite linear alternate;
}
 
@keyframes bgposition {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

这里大家还卓殊了 background-size。首先理解下:

background-position:钦定图片的初叶地方。那一个起首地方是相对于以 background-origin 定义的背景地方图层来讲的。> background-size:设置背景图片大小。当取值为百分比时,表示钦命背景图片相对背景区的百分比大小。当设置多个参数时,第叁个值钦赐图片的宽度,第二个值钦命图片的冲天。

通过 background-size: 200% 100% 将图片的大幅设置为两倍背景区的增长幅度,再经过转移 background-position 的 x 轴初阶地点来运动图片,由于背景图设置的轻重是背景区的两倍,所以 background-position的活动是由 0 0 -> 100% 0 。最后效果如下:

See the Pen background-position 达成渐变动画 by Chokcoco (@Chokcoco) on CodePen.

字体文件深入分析的基本原理

2、缩放

‘缩放’,即使用css transform缩放八分之四的轻重缓急,代码如下:

CSS

.transform-scale { position: relative; &:after, &:before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #f00; } &:after { top: auto; bottom: 0; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.transform-scale {
    position: relative;
    &:after,
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 1px;
        width: 100%;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        background: #f00;
    }
    &:after {
        top: auto;
        bottom: 0;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
}

优点:

  • 落到实处单线条轻易
  • 大大小小、颜色能够配备

缺点:

  • 没辙落实圆角
  • 四条边框比较郁结
  • 借助DOM,可能会与本来就有体制冲突,如常用的clearfix

经过 background-size 模拟渐变动画

既然 background-position 能够,那么另贰个 background-size 当然也是一点也不逊色。与地点的格局相通,只是此次 background-position 辅助 background-size ,CSS 代码如下:

div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%); background-position: 100% 0; animation: bgSize 5s infinite ease-in-out alternate; } @keyframes bgSize { 0% { background-size: 300% 100%; } 100% { background-size: 100% 100%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
    background-position: 100% 0;
    animation: bgSize 5s infinite ease-in-out alternate;
 
}
 
@keyframes bgSize {
    0% {
        background-size: 300% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

功用如下:

See the Pen position-size 达成渐变动画 by Chokcoco (@Chokcoco) on CodePen.

因此转移 background-size 的首先个值,小编将背景图的大大小小由 3 倍背景区大小向 1 倍背景区大小过渡,在背景图调换的进程中,就有了风姿洒脱种动画的效率。

而关于缘何要合营 background-position: 100% 0 。是出于倘诺不设置 background-position ,私下认可情况下的值为 0% 0%,会导致动画最侧面的颜料不改变,像上面那样,非常小自然:

图片 9

字体文件的主导结构

以 ttf 文件为例,字体文件中主要含有了字体头表,地点索引表和图元数据表等等,在那之中最基本的片段正是图元数据表,也正是字形描述表,它能够分包可变多少的图元,各种图元能够有例外数额的调控点,甚至还是可以够有数量可变的图元指令,通过岗位索引表对应到每种字符上,通过图元数据表,使其只满含需求采取的字符的图元描述。就能够最小化字体,使其可用于生产情形的页面中,别的连串的书体文件(如 woff, eot, svg 等)原理也是不相上下,仅仅是压缩格局和字形描述标准分化,也得以相互转变。

3、阴影

CSS

.shadow { -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5); box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5); }

1
2
3
4
.shadow {
    -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
    box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
}

没觉得这些艺术好用,模拟的功能壮志未酬,颜色也倒霉安排,不引入

透过 transform 模拟渐变动画

地点二种办法即使都得以完毕,不过总以为非常不够自由,只怕随机性远远不够大。

不独有如此,上述两种艺术,由于选取了 background-positionbackground-size,并且在耳濡目染中改造那七个属性,导致页面不断地拓宽大气的重绘(repaint),对页面质量消耗特别沉痛,所以大家还足以尝试 transfrom 的方法:

运用伪元素同盟 transform 举行耳濡目染动画,通过成分的伪元素 before 或者 after ,在要素内部画出多少个大背景,再通过 transform 对伪成分实行转移:

JavaScript

div { position: relative; overflow: hidden; width: 100px; height: 100px; margin: 100px auto; border: 2px solid #000; &::before { content: ""; position: absolute; top: -100%; left: -100%; bottom: -100%; right: -100%; background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%); background-size: 100% 100%; animation: bgposition 5s infinite linear alternate; z-index: -1; } } @keyframes bgposition { 0% { transform: translate(30%, 30%); } 25% { transform: translate(30%, -30%); } 50% { transform: translate(-30%, -30%); } 75% { transform: translate(-30%, 30%); } 100% { transform: translate(30%, 30%); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
div {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border: 2px solid #000;
 
    &amp;::before {
        content: "";
        position: absolute;
        top: -100%;
        left: -100%;
        bottom: -100%;
        right: -100%;
        background: linear-gradient(45deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
        background-size: 100% 100%;
        animation: bgposition 5s infinite linear alternate;
        z-index: -1;
    }
}
 
 
@keyframes bgposition {
    0% {
        transform: translate(30%, 30%);
    }
    25% {
        transform: translate(30%, -30%);
    }
    50% {
        transform: translate(-30%, -30%);
    }
    75% {
        transform: translate(-30%, 30%);
    }
    100% {
        transform: translate(30%, 30%);
    }
}
 

落实原理如下图所示:

图片 10

大家能够在大肆 animation 动画进程中再投入 scaleskewroate 等转移,让效果看上去更是活灵活现随机。效果如下:

See the Pen 伪成分合作transform达成背景渐变 by Chokcoco (@Chokcoco) on CodePen.

地点列出来的只是有个别办法,理论来说,伪成分合营能够发出位移也许形变的属性都能够做到地方的功力。大家竟然能够使用差异的缓动函数只怕借鉴蝉原则,制作出随机性十一分强的效果。

本来,本文罗列出来的都是纯 CSS 方法,使用 SVG 或然 Canvas 相似能够构建出来,并且品质更佳。感兴趣的读者能够活动往下商量。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:H5页面快速搭建之高级字体应用实践,的常用方法

上一篇:结构性伪类选择器,单行居中 下一篇:从倒影说起,构架CSS基础样式库
猜你喜欢
热门排行
精彩图文