移动端第七章字体

科技2022-07-16 107

字体

1：文字阴影

text-shadow：x y blur color, … 参数 x 横向偏移 y 纵向偏移 blur 模糊距离 color 阴影颜色

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-size: 100px; text-align: center; /*text-shadow: x y 模糊度颜色;*/ /*text-shadow: 2px 2px 2px red;*/ text-shadow: 2px 2px 2px red,4px 4px 4px yellow,8px 8px 8px blue; } </style> </head> <body> <p>通天塔</p> </body> </html>

2：文字描边

webkit-text-stroke:宽度颜色

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-size: 100px; text-align: center; -webkit-text-stroke:2px red; unicode-bidi:bidi-override; direction:rtl; } </style> </head> <body> <p>通天塔</p> </body> </html>

3:文字排列

direction 定义文字排列方式(全兼容) rtl 从右向左排列 ltr 从左向右排列注意要配合unicode-bidi:bidi-override; 一块使用

实例:

4：省略号

单行文本省略号

p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

多行文本省略号多行省略不兼容IE，要想兼容必须用插架或者滤镜写法（自行百度）

p{ display:-webkit-box; overflow:hidden; word-break:break-all; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:20; }

5：自定义字体类型

@font-face { font-family:'二哈'; src: url(fonts/Fontin_Sans_R_45b.otf); }

实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ font-size: 200px; text-align: center; font-family: 'fon_t'; } @font-face { font-family:'fon_t'; src: url(fon/Fontin_Sans_I_45b.otf); } </style> </head> <body>  <div>asdfghjk</div> </body> </html>

6：字体图标 icon

实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <link rel="stylesheet" type="text/css" href="font/iconfont.css"/> <style type="text/css"> .icon_t{ /*字体图标的本质就是字体不过长的想一个图形*/ font-size: 200px; text-align: center; color: red; } .zanting{ font-size: 200px; text-align: center; color: red; } </style> </head> <body> <p class="icon iconfont icon_t"></p> <p class="icon iconfont icon-zanting zanting"></p> </body> </html>

Processed: 0.009, SQL: 8