> ## :-: 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); } ```