|
CSS 字体 字体选择很重要选择正确的字体会对网站的用户体验产生巨大影响。 正确的字体可以为您的品牌创造强有力的形象。 使用易于阅读的字体很重要。字体为您的文本增加了价值。为字体选择正确的颜色和文本大小也很重要。 通用字体族在 CSS 中，有五个通用字体族： · 衬线字体（Serif）-在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。 · 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。 · 等宽字体（Monospace）-这里所有字母都有相同的固定宽度。它们创造出机械式的外观。 · 草书字体（Cursive）-模仿了人类的笔迹。 · 幻想字体（Fantasy）-是装饰性/俏皮的字体。 所有不同的字体名称都属于这五个通用字体系列之一。 Serif 和 Sans-serif 字体之间的区别file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png 提示：在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。 一些字体的例子| 通用字体族 | | | Times New Roman
Georgia
Garamond | | | | Courier New
Lucida Console
Monaco | | Brush Script MT
Lucida Handwriting | | |
CSS font-family 属性在 CSS 中，我们使用 font-family 属性规定文本的字体。 font-family属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。 注释：如果字体名称不止一个单词，则必须用引号引起来，例如："TimesNew Roman"。 实例为三个段落规定不同的字体： .p1 { font-family: "Times New Roman", Times, serif;} .p2 { font-family: Arial, Helvetica, sans-serif;} .p3 { font-family: "Lucida Console", "Courier New", monospace;}
字体样式font-style 属性主要用于指定斜体文本。 此属性可设置三个值： · normal - 文字正常显示 · italic - 文本以斜体显示 · oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少） 实例p.normal { font-style: normal;} p.italic { font-style: italic;} p.oblique { font-style: oblique;}
字体粗细font-weight 属性指定字体的粗细： 实例p.normal { font-weight: normal;} p.thick { font-weight: bold;}
字体变体font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。 在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。 实例p.normal { font-variant: normal;} p.small { font-variant: small-caps;}
字体大小font-size 属性设置文本的大小。 在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。 请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。 font-size值可以是绝对或相对大小。 绝对尺寸： · 将文本设置为指定大小 · 不允许用户在所有浏览器中更改文本大小（可访问性不佳） · 当输出的物理尺寸已知时，绝对尺寸很有用 相对尺寸： · 设置相对于周围元素的大小 · 允许用户在浏览器中更改文本大小 注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。 以像素设置字体大小使用像素设置文本大小可以完全控制文本大小： 实例h1 { font-size: 40px;} h2 { font-size: 30px;} p { font-size: 14px;}
提示：如果您使用了像素，则仍然可以使用缩放工具来调整整个页面的大小。 用 em 设置字体大小为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。 W3C建议使用 em 尺寸单位。 1em等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。 可以使用这个公式从像素到 em 来计算大小：pixels/16=em。 实例h1 { font-size: 2.5em; /* 40px/16=2.5em */} h2 { font-size: 1.875em; /* 30px/16=1.875em */} p { font-size: 0.875em; /* 14px/16=0.875em */}
在上例中，em 单位的文本大小与上一个例子中的像素大小相同。但是，若使用em 尺寸，则可以在所有浏览器中调整文本大小。 不幸的是，旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大，缩小文本时会更小。 使用百分比和 Em 的组合实例body { font-size: 100%;} h1 { font-size: 2.5em;} h2 { font-size: 1.875em;} p { font-size: 0.875em;}
我们的代码目前运行良好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！ 响应式字体大小可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewportwidth"）。 这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放： 实例<h1 style="font-size:10vw">Hello World</h1>
视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为50 厘米宽，则 1vw 为 0.5 厘米。
| 
发表于 2023-11-9 16:05:08
收藏
