css字体样式代码花式

CSS字体样式代码花式

/* 使用Google字体 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* 设置字体样式 */
p {
  font-family: 'Open Sans',sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 创建斜体字 */
em {
  font-style: italic;
}

/* 创建粗体字 */
strong {
  font-weight: bold;
}

/* 创建下划线 */
u {
  text-decoration: underline;
}

/* 创建删除线 */
strike {
  text-decoration: line-through;
}

/* 添加字体阴影 */
p {
  text-shadow: 2px 2px 2px #333;
}

/* 设置首字母样式 */
p:first-letter {
  font-size: 50px;
  color: #f00;
  float: left;
  padding-right: 5px;
}

/* 创建毛笔字体样式 */
@font-face {
  font-family: 'maobi';
  src: url('maobi.ttf');
}

p {
  font-family: 'maobi',cursive;
}

/* 创建使用前缀的字体 */
p {
  -webkit-font-smoothing: antialiased;
}

/* 创建使用后缀的字体 */
p {
  font-feature-settings: "liga" 1;
}

/* 创建使用伪类的字体 */
p::first-line {
  color: #f00;
}

CSS字体样式代码花式，让网页更加美观、生动、有吸引力。