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