css 文本制作
CSS 文本样式设置
通过 CSS 可以控制文本的字体、颜色、大小、对齐方式等多种样式属性。
字体设置
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;颜色与装饰
color: #333333;
text-decoration: underline;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);间距与对齐
letter-spacing: 1px;
line-height: 1.5;
text-align: center;
text-indent: 2em;CSS 文本特效
渐变文字效果
background: linear-gradient(to right, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;文字描边
-webkit-text-stroke: 1px black;
text-stroke: 1px black;响应式文本设计
使用视口单位实现响应式文字大小：
font-size: calc(16px + 0.5vw);媒体查询调整不同屏幕尺寸下的文本样式：
@media (max-width: 768px) {
body {
font-size: 14px;
line-height: 1.4;
}
}文本溢出处理
单行文本溢出显示省略号：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;多行文本溢出处理：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;自定义字体引入
使用 @font-face 引入自定义字体：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyFont', sans-serif;
}文本选择样式
修改文本被选中时的样式：
::selection {
background-color: #ffcc00;
color: #000;
}文字方向控制
设置文字书写方向：
writing-mode: vertical-rl;
text-orientation: mixed;文本换行控制
处理长单词和URL的换行行为：
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
