Css3-web fonts and CSS3 multi-column layouts and scaling layouts

Web Font syntax

@font-face{    font-family:"";    src:url() format()    ....}

Compatibility wording

@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- */}

Font format

• Ttf
• EoT
• Woff
• Svg

Tools

• There are font https://www.youziku.com/
• Ali Web Font Http://www.iconfont.cn/webfont/#!/webfont/index
• Online font Conversion

Font icon

• Ali icon
• Font Amsome

Multi-column layout-related properties

• Columns composite properties, set the number of columns and the width of each column, you can write only one value
• Width of the column-width column
• Number of Column-count columns
• Column-gap per column Clearance
• Border lines between Column-rule columns (similar to the border property)
• Columu-rule-color
• Column-rule-width
• Column-rule-style
• Column-fill none/balance Column Height
• Column-span None (default)/all (across all columns)
• Column-break-before set whether the item is preceded by a break auto/always/avoid
• Column-break-after set whether the item is followed by a break auto/always/avoid
• Column-break-inside set whether the item is within a break auto/avoid

Telescopic box (elastic box model) concept-related properties

• Set the element as a telescopic container

  display:flexdisplay:inline-flex

• Set the direction of the flow of the extension (spindle)

  flex-direction:row（从左往右排列）/column（从上往下排列）/row-reverse（对齐方式与row相反）/column-reverse（对齐方式与row相反）

• Set line breaks (only the side axes are considered)

  flex-wrap:nowrap（默认 不换行）/wrap（换行）/wrap-reverse（先排下面的行再排上面行）

• Composite attribute Flex-flow for the direction of the telescopic flow and the line wrapping

• Alignment of spindle direction

  jusitify-content: flex-start（默认）/flex-end（向右对齐 不改变流的方向）/center/space-between（各行在弹性盒容器中平均分布 两端紧贴盒子）/space-around（各行在弹性盒容器中平均分布 两端保留子元素与子元素之间距离的一半）

• Alignment (strong) of the side axis direction

  • Stack Stretch row align-content

  • This property can be used to adjust the alignment of the telescopic row in the container when there is space on the side axis of the telescopic container, similar to the properties of the alignment of the scaling item on the spindle justify-content . Note: This property has no effect on a single row of telescopic containers

    ALIGN-CONTENT:STRECTH (each row will stretch to occupy the remaining space)/flex-start (the rows are stacked to the starting position)/flext-end (each row to the end position is stacked)/center (each row is stacked in the middle of each row in a tight position, Centered in his flex box)/space-between (the rows are evenly spaced across the box in the Elastic Box container)/space-around (the rows are evenly spaced in the elastic box container to preserve half the distance between the child elements and the child elements)

• Alignment (weak) of the side axis direction

  align-items:flex-start/flex-end/center/baseline/stretch    /*设置给 伸缩容器  可以在`一行`中起效果*/ align-self: auto/flext-start/flex-end/baseline/strectch     /*设置给伸缩项目*/

• Box expansion box magnification ratio:

  • Flex-grow magnification ratio
  • Flex-shrink shrinkage ratio (0 does not shrink)
  • Flex-basis Benchmark

Css3-web fonts and CSS3 multi-column layouts and scaling layouts