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
字体在线转换 https://www.fontsquirrel.com

字体图标

阿里图标
Font Amsome

多列布局

伸缩盒(弹性盒模型)

概念

相关属性

把元素设置为伸缩容器
```
  display:flex;

  display:inline-flex
```

设置伸缩流方向(主轴)

  flex-direction:row(左对齐)/column(顶对齐)/

  row-reverse(右对齐从右到左)/column-reverse

  (底对齐)

设置换行(测轴)

  flex-wrap:nowrap(flex容器为单行,flex子项溢出容器)/

  wrap(多行溢出内容放置到新行,)/

  wrap-reverse

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

主轴方向对齐

  jusitify-content:flex-start/

  flex-end/center/space-between/

  space-around

测轴方向对齐(强)

  align-content:strecth/flex-start/

  flex-end/center/space-between/

  space-around

测轴方向对齐(弱)

  设置给伸缩容器align-items:flex-start/

  flex-end/center/baseline/stretch

  设置给伸缩项目align-self:flex-start/

  flex-end/center/baseline/stretch

盒子伸缩和放大比率
flex-grow 放大比率
flex-shrink 收缩比率
flex-basis 基准

巴特西

WEB字体,多列布局和伸缩盒

WEB字体

语法

兼容性写法

字体格式

工具

字体图标

多列布局

相关属性

伸缩盒(弹性盒模型)

概念

相关属性

最新文章

热门文章