書法字體布局，WEB字體,多列布局和伸縮盒

2023-10-07 阅读 23 评论 0

摘要：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')

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

html如何讓盒子縱向排列，測軸方向對齊(強)

  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 基準

轉載于:https://www.cnblogs.com/DCL1314/p/7308536.html

原文链接：https://hbdhgg.com/3/125731.html

上一篇：怎么在文件夾下面打開命令窗口，讓打開文件夾直接在某路徑打開

下一篇：簡單的shell腳本代碼，Linux常用腳本命令總結

标签：書法字體布局 html如何讓盒子縱向排列 flex布局多行多列 css多列列表布局網頁布局代碼盒子安卓布局字體單位 css彈性盒子布局教程 web盒子居中

書法字體布局

2023-10-07書法字體布局，WEB字體,多列布局和伸縮盒

发表评论: