CSS3嵌入web字体与布局

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('woff'), /* chrome、firefox */
			 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

字体格式

• ttf
• eot
• woff
• svg

工具

• 有字库 https://www.youziku.com/
• 阿里web字体 http://www.iconfont.cn/webfont/#!/webfont/index
• 字体在线转换

字体图标

• 阿里图标
• Font Amsome

多列布局

相关属性

• columns
• column-width
• column-count
• column-gap 列间隙
• column-rule 列之间的边框线
• columu-rule-coor
• column-rule-width
• column-rule-style
• column-fill none/balance
• column-span none/all
• column-break-before 设置项目前面是否断行 auto/always/avoid
• column-break-after 设置项目后面是否断行 auto/always/avoid
• column-break-inside 设置项目内部是否断行 auto/avoid

伸缩盒（弹性盒模型）

概念

相关属性

• 把元素设置为伸缩容器

    display:flex
    display:inline-flex
  

• 设置伸缩流方向（主轴）

    flex-direction:row/column/row-reverse/column-reverse
  

• 设置换行（侧轴）

    flex-wrap:nowrap/wrap/wrap-reverse
  

• 伸缩流方向和换行的复合属性 flex-flow

• 主轴方向对齐

    jusitify-content: flex-start/flex-end/center/space-between/space-around
  

• 侧轴方向对齐 (强)

    align-content: strecth/flex-start/flext-end/center/space-between/space-around
  

• 侧轴方向对齐 （弱）

    align-items:flex-start/flex-end/center/baseline/stretch    /*设置给 伸缩容器*/ 
    align-self: auto/flext-start/flex-end/baseline/strect     /*设置给伸缩项目*/
  

• 盒子伸缩盒放大 比率

  • flex-grow 放大比率
  • flex-shrink 收缩比率
  • flex-basis 基准