当前位置：首页 > 行业动态 > 正文

html5字体边框

admin
行业动态
2025-05-04
2276

HTML5中通过CSS设置字体属性（如font-family、size）及边框样式（width、style、color），提升页面美观

字体设置与自定义

基础字体属性

font-family：设置字体系列，优先使用系统安全字体（如Arial、Helvetica）。
```
p {
  font-family: 'Arial', sans-serif;
}
```
font-weight：控制粗细（100-900或bold/normal）。
font-style：斜体（italic）或正常（normal）。
font-size：单位支持px、em、rem等。

自定义字体加载

@font-face：引入本地字体文件。

@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'MyFont', sans-serif;
}

在线字体库：通过Google Fonts等服务引入。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

兼容性注意事项

提供多格式字体文件（如.woff2、.ttf）以兼容不同浏览器。
使用unicode-range限制字体适用范围，优化加载性能。
备选字体需按优先级排列,避免字体缺失。

边框样式与技巧

基础边框属性

border：简写属性，包含宽度、样式、颜色。

div {
  border: 2px solid #333; / 宽度 样式 颜色 /
}

单独控制：
- border-width：数值或thin/medium/thick。
- border-style：solid、dashed、dotted等。
- border-color：支持透明（transparent）。

圆角与阴影

圆角边框：

button {
  border-radius: 8px; / 统一四角 /
}

阴影效果：

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.2); / 水平偏移 垂直偏移 模糊半径 颜色 /
}

图片边框（`border-image`）

将图片切割为边框：

.frame {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round; / 切片模式：stretch/repeat/round /
}

字体与边框属性对比表

属性类别	常用属性	功能描述	示例值/用法
字体	`font-family`	指定字体系列	`'Arial', sans-serif`
`font-weight`	字体粗细	`bold`或`700`
`@font-face`	自定义字体加载	需配合`src`属性
边框	`border`	简写设置边框	`2px dashed #666`
`border-radius`	圆角半径	`10px`或`50%`
`box-shadow`	投影效果	`0 2px 5px rgba(0,0,0,0.3)`
`border-image`	图片边框	`url('img.jpg') 30 stretch`