text-shadow: length(阴影距离文字横向方向距离) length(阴影距离文字纵向方向距离) length(模糊度越大越模糊) color(背景模糊的颜色)
第一个length正方向向右可添加多个阴影,直接加“,”
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ text-shadow: -5px -5px 10px #ff00ff, 5px 5px 5px #ff00ff, 10px 10px 2px #ff00ff; color: black; font-size: 40px; font-weight: bold; font-family: 宋体; background-image: url("L04.jpg"); height: 500px; width: 500px; padding: 30px 0; text-align: center; } </style> </head> <body> <!--text-shadow:length阴影离开文字的横向方向距离 length阴影离开文字的纵向方向距离 length透明度 color背景模糊的颜色--> <div>你好</div> </body> </html>
文本自动换行
word-break: normal,keep-all,break-all;normal: 使用浏览器的默认换行规则 keep-all:只能在半角、空格或连字符处换行 break-all:允许在单词之间内换行
使用服务器端字体
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> @font-face { font-family: WebFont; src: url("KaushanScript-Regular.otf"); font-weight: normal; } div{ font-family: WebFont; font-size: 20px; } </style> </head> <body> <div> This is my page web123; </div> </body> </html>
先引用客户端上的字体,没有再引用服务器端上的字体
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> @font-face { font-family: MyArial; src:local("Arial"), url("KaushanScript-Regular.otf"); } div{ font-family: MyArial; } </style> </head> <body> <div> This is my page web123; </div> </body> </html>
font-size-adjust: aspect;
aspect的计算方法:x-height:58 font-size:100px aspect:0.58
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ font-family: Menlo; font-size: 16px; font-size-adjust: 0.60; } #div2{ font-family: cursive; font-size: 16px; font-size-adjust: 0.57; } #div3{ font-family: "Lantinghei SC"; font-size: 16px; font-size-adjust: 0.57; } </style> </head> <body> <div id="div1">Text sample</div> <div id="div2">Text sample</div> <div id="div3">Text sample</div> </body> </html>
情人节单身狗的学习笔记2017.2.14