> ## :-: font 引入外部字體
```
@font-face {
font-family: 'diyfont'; /* 給該字體命名為 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- */
}
```
> ## :-: text 字體系列
```
.text {
height: 100px;
text-align: center;
font-size: 80px;
font-weight: 600;
color: #248781;
/* text -- 系列 */
/* 字體陰影 text-shadow
參數1:x -- 偏移量
參數2:y -- 偏移量
參數3:模糊程度
參數4:陰影顏色
(,可以加多個陰影)
*/
text-shadow: 10px 10px 10px #418698,
50px 100px 10px #f40,
-50px 200px 10px #519e78;
/* 浮雕效果 */
text-shadow: 1px 1px #000, -1px -1px #fff;
/* 鏤刻效果 */
text-shadow: -1px -1px #000, 1px 1px #fff;
}
```
> ## :-: text_2 報紙布局
```
.demo,
.text {
/* width: 200px;
height: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px); */
/* white-space 可以讓HTML的換行及空格展示出來 */
white-space: pre;
/* word-break 設置文本換行規則 */
word-break: break-word;
/* column -- 系列 (報紙布局) */
columns: 90px 5;
/* 分成 5列 */
column-count: 5;
/* 設置間隙 */
column-gap: 15px;
/* 設置兩列之間的分割線 */
column-rule: 1px solid red;
transition: all .6s;
}
.text>p {
margin: 10px;
/* 貫穿整個列 */
column-span: all;
}
.text:hover {
/* 標簽元素向left偏移 */
transform: translate(-1300px);
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request