如何在CSS中设置字体样式_font-family font-size color应用-css教程-PHP中文网

要设置文本字体样式，需使用font-family、font-size和color属性。font-family指定字体列表并以通用字体族兜底，确保兼容性；通过系统字体、@font-face加载自定义字体或使用system-ui提升美观与适配；font-size选用px、em或rem，其中rem因可访问性和响应式优势成为首选；color支持多种格式，应结合对比度检测、透明度控制、语义化变量及主题切换提升可访问性，并避免仅用颜色传递关键信息。

如何在css中设置字体样式_font-family font-size color应用

在CSS中，要设置文本的字体样式，我们主要依赖font-family来指定字体类型，font-size控制文字的大小，以及color来定义文本的颜色。这三者是网页视觉设计中最基础也最核心的样式属性，它们共同决定了页面文本的阅读体验和整体风格。

解决方案

要为网页元素应用字体样式，你可以直接在CSS规则中使用这些属性。例如，为整个body设置默认字体，或为特定元素（如h1、p）定义个性化样式。

1. font-family：字体族 这个属性用于指定文本的字体。它接受一个字体名称列表，浏览器会尝试按顺序使用这些字体。如果第一个字体在用户的系统上不可用，浏览器就会尝试列表中的下一个，直到找到一个可用的字体或者使用一个通用的字体族。

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
    font-family: "Georgia", serif;
}

登录后复制

最佳实践：始终在列表末尾包含一个通用字体族（如serif、sans-serif、monospace、cursive、fantasy）。这确保了即使所有指定字体都不可用，文本也能以一个可读的通用字体显示。

2. font-size：字体大小 这个属性用于设置文本的大小。你可以使用多种单位来定义字体大小，每种单位都有其适用场景。

p {
    font-size: 16px; /* 像素单位，固定大小 */
}

.hero-title {
    font-size: 3em; /* 相对父元素字体大小的倍数 */
}

.description {
    font-size: 1.2rem; /* 相对根元素（html）字体大小的倍数 */
}

button {
    font-size: 90%; /* 相对父元素字体大小的百分比 */
}

.responsive-text {
    font-size: 3vw; /* 相对视口宽度的百分比 */
}

登录后复制

最佳实践：在现代响应式设计中，rem通常是设置基础字体大小的首选，因为它能更好地支持用户在浏览器中调整字体大小，提升可访问性。em则常用于组件内部，使其能按比例缩放。px在需要精确控制且不希望随用户设置变化的场景（如一些图标或固定元素）下仍有其用武之地。

3. color：字体颜色 这个属性用于设置文本的颜色。你可以使用多种颜色值格式，包括命名颜色、十六进制值、RGB值、RGBA值、HSL值和HSLA值。

body {
    color: #333; /* 十六进制值 */
}

h1 {
    color: rgb(255, 0, 0); /* RGB值 */
}

a {
    color: rgba(0, 128, 0, 0.8); /* RGBA值，包含透明度 */
}

.highlight {
    color: hsl(240, 100%, 50%); /* HSL值 */
}

.muted-text {
    color: gray; /* 命名颜色 */
}

登录后复制

最佳实践：选择颜色时，除了美观，更要考虑可读性和可访问性。确保文本颜色与背景颜色之间有足够的对比度，尤其是对于视力障碍用户。使用RGBA或HSLA可以方便地添加透明度，实现更丰富的视觉效果。

选择字体族（`font-family`）时，如何兼顾美观性与兼容性？

这确实是一个设计与技术之间反复权衡的难题。我个人在项目初期，总会花不少时间去思考字体的选择，因为它直接影响了品牌调性和用户的阅读体验。

一个常常被忽视的细节是，你选择的字体不仅要好看，更要“存在”。也就是说，用户电脑上得有这个字体，或者你能想办法让浏览器加载它。这就是为什么我们总要考虑兼容性。

立即学习“前端免费学习笔记（深入）”；

1. 优先使用系统字体（Web-safe fonts）与通用字体族 最简单也最兼容的做法是使用“网页安全字体”（Web-safe fonts），比如Arial, Helvetica, Times New Roman, Georgia, Verdana等。这些字体在大多数操作系统上都预装了。

body {
    font-family: Arial, Helvetica, sans-serif; /* 兼容性强，但设计感可能不足 */
}

登录后复制

在font-family列表的末尾，务必添加一个通用字体族（serif、sans-serif、monospace、cursive、fantasy）。这就像是给浏览器一个最后的“兜底”选项。如果前面所有指定字体都找不到，浏览器至少会显示一个它认为最接近的通用字体，而不是一个奇怪的默认字体。我常常会思考，一个好的字体堆栈（fallback stack）就像一道安全的防线，它能确保在任何情况下，内容都是可读的。

2. 拥抱自定义字体（@font-face） 当网页安全字体无法满足设计需求时，@font-face规则就成了我们的救星。它允许你加载服务器上的自定义字体文件，让所有用户都能看到你精心挑选的字体，无论他们电脑上有没有安装。

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 提升用户体验，避免FOIT/FOUT */
}

h1 {
    font-family: 'MyCustomFont', sans-serif;
}

登录后复制

格式选择：WOFF2是目前推荐的格式，压缩率高，支持浏览器广泛。WOFF作为次选。
性能考量：自定义字体文件可能很大，会影响页面加载速度。优化字体文件（子集化、选择性加载）和使用font-display: swap;等策略非常重要。font-display: swap;告诉浏览器，在自定义字体加载完成前，先用系统字体显示文本，加载完成后再替换，这样用户就不会看到空白文本了。
版权与许可：使用自定义字体时，务必注意字体文件的版权和许可协议。有些字体是免费的，有些则需要购买授权。

3. 考虑使用system-ui 这是一个比较新的通用字体族关键字，它指示浏览器使用用户操作系统默认的UI字体。这样可以使你的网站看起来更“原生”，与用户的操作系统体验保持一致。

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

登录后复制

这种方法兼顾了美观（原生体验）和兼容性（操作系统自带），对于一些注重简洁和系统感的网站来说，是个不错的选择。

在我看来，完美的字体兼容性是几乎不存在的，我们能做的就是通过合理的字体堆栈和技术手段，尽可能地保证在绝大多数场景下，用户都能获得良好的阅读体验。

设置字体大小（`font-size`）时，`em`、`rem`与`px`之间该如何选择？

这个问题我被问过很多次，说实话，这三者没有绝对的“最好”，只有“最适合”的场景。理解它们之间的区别，是写出灵活、可维护CSS的关键。

Hot Tattoo AI

人工智能纹身生成器，提供独特的纹身创意

查看详情

1. px（像素）：绝对的精确，固定的世界

特点：px是一个绝对单位，1px等于显示器上的一个物理像素（在Retina屏等高DPI设备上，一个CSS像素可能对应多个物理像素）。它不会受父元素或根元素字体大小的影响。
优点：
- 精确控制：当你需要像素级的精确度时，px是首选，比如某些图标、边框或特定UI元素的固定大小。
- 所见即所得：在设计稿和浏览器之间，px的转换最直观。
缺点：
- 可访问性差：用户在浏览器中调整字体大小设置时，使用px定义的字体大小不会随之改变，这对于视力障碍用户来说很不友好。
- 响应式布局挑战：在不同屏幕尺寸下，px定义的字体大小保持不变，可能需要通过媒体查询手动调整，增加了维护成本。
适用场景：少数需要固定大小的元素，或者作为其他相对单位的基准值（如在html上设置font-size: 16px;）。

2. em：相对父级，局部缩放的利器

特点：em是一个相对单位，1em等于当前元素的font-size。如果当前元素没有设置font-size，它会继承父元素的font-size。
优点：
- 局部可伸缩性：非常适合在组件内部进行字体缩放。比如一个卡片组件，你可以在卡片容器上设置一个基础font-size，然后内部的标题、描述等都用em，这样整个卡片字体就能按比例缩放。
- 模块化：有助于创建可复用的UI模块，当模块的基准字体改变时，所有子元素字体也会相应改变。
缺点：
- “复利效应”：这是em最让人头疼的地方。如果嵌套层级很深，每个子元素都使用em，那么字体大小会像滚雪球一样越来越大（或越来越小），计算起来非常复杂，难以预测。
适用场景：组件内部的字体大小，当你希望字体大小相对于其直接父元素进行调整时。

3. rem（root em）：相对根元素，全局控制的王者

特点：rem也是一个相对单位，但它始终相对于根元素（html）的font-size。1rem就等于html元素的font-size。
优点：
- 全局可伸缩性与可预测性：这是rem最大的优势。你只需要在html元素上设置一个基础字体大小（比如font-size: 16px;或font-size: 62.5%;），然后所有其他元素的字体大小都用rem来定义。这样，当用户调整浏览器字体大小时，整个页面的字体都能按比例缩放，极大提升了可访问性。
- 避免“复利效应”：由于rem只参照根元素，无论嵌套多深，字体大小的计算都非常直接，解决了em的痛点。
- 响应式设计友好：通过媒体查询调整html的font-size，可以轻松实现全局字体在不同屏幕尺寸下的响应式调整。
缺点：
- 相对于px，仍然需要一些计算（比如16px是1rem，那么24px就是1.5rem）。不过现在有工具或CSS预处理器可以帮助转换。
适用场景：绝大多数的字体大小设置，尤其是基础文本、标题等，以实现良好的可访问性和响应式布局。

我的建议：我个人倾向于在大部分情况下使用rem来定义字体大小。我会先在html元素上设置一个基础的font-size（比如16px，或者为了方便计算设置为62.5%，这样1rem就等于10px），然后其他所有文本都使用rem。对于一些需要局部缩放的组件，我可能会在组件根部使用em，但要非常小心嵌套层级。px则保留给那些绝对不能变动、需要精确控制的UI元素。

除了基本颜色，`color`属性在提升可访问性方面还有哪些应用？

color属性远不止是简单地给文字上色。在我看来，它更是连接设计美学与用户体验，尤其是可访问性的重要桥梁。一个好的颜色策略，能让网站对所有用户都更加友好。

1. 确保足够的对比度 这是关于color可访问性最重要的一点。WCAG（Web Content Accessibility Guidelines）标准明确指出，文本与背景色之间必须有足够的对比度，以确保低视力用户也能清晰阅读。

WCAG 2.1 AA级标准：对于常规文本，对比度至少为4.5:1；对于大号文本（18pt以上或14pt粗体以上），对比度至少为3:1。
如何实现：
- 使用工具：有很多在线工具和浏览器插件（如Lighthouse、WebAIM Contrast Checker）可以帮助你检测颜色对比度。在设计初期就进行测试，比后期修复要高效得多。
- 选择调色板：在选择网站主色调时，就应该考虑到其与黑白文本的对比度。我通常会准备一套“深色模式”和“浅色模式”的颜色变量，确保在两种模式下都能满足对比度要求。

2. 利用rgba和hsla实现透明度与视觉层次rgba()和hsla()允许你在指定颜色的同时，添加一个alpha通道值（0到1之间），控制颜色的透明度。这在视觉设计中非常有用，尤其是在处理重叠元素或创建微妙的视觉效果时。

.card-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    color: #fff; /* 白色文字，确保与半透明背景有高对比 */
}

.subtle-text {
    color: hsla(0, 0%, 20%, 0.7); /* 稍微透明的深灰色文字 */
}

登录后复制

可访问性考量：虽然透明度能带来美感，但也要注意，透明度过高可能导致文本变得难以辨认，尤其是在复杂背景上。确保透明后的颜色依然能满足对比度要求。

3. 语义化颜色变量与主题切换 随着CSS变量（自定义属性）的普及，我们现在可以更优雅地管理颜色。通过定义语义化的颜色变量，可以大大提升网站的可维护性和可访问性。

:root {
    --primary-color: #007bff;
    --text-color-dark: #333;
    --text-color-light: #f8f9fa;
    --background-color-light: #fff;
    --background-color-dark: #212529;
}

body {
    color: var(--text-color-dark);
    background-color: var(--background-color-light);
}

@media (prefers-color-scheme: dark) {
    body {
        color: var(--text-color-light);
        background-color: var(--background-color-dark);
    }
}

登录后复制

优势：
- 统一性：确保整个网站的颜色使用一致。
- 易于修改：只需修改变量值，就能全局更新颜色。
- 主题切换：结合媒体查询@media (prefers-color-scheme: dark)，可以轻松实现暗色模式（Dark Mode），这对于用户来说是一个重要的可访问性特性，可以减少夜间阅读的眼睛疲劳。

4. 避免仅用颜色传达信息 这是一个重要的可访问性原则：不要仅仅依靠颜色来传达信息或指示动作。例如，一个表单错误提示，如果仅仅将文本变为红色而不添加图标或文字说明（如“必填项”），那么色盲用户可能无法识别这个错误。

<!-- 不好的实践：仅用颜色指示错误 -->
<p style="color: red;">密码不正确。</p>

<!-- 好的实践：结合图标和文字说明 -->
<p class="error-message">
    <span role="img" aria-label="错误">❌</span> 密码不正确，请重新输入。
</p>

登录后复制

始终确保关键信息可以通过多种感官维度（颜色、形状、文本、图标等）来获取。

在我看来，颜色的选择和应用是前端开发中一个充满艺术性和科学性的领域。它不仅仅是让页面看起来漂亮，更重要的是让页面变得可用、易用，对所有人都开放。

以上就是如何在CSS中设置字体样式_font-family font-size color应用的详细内容，更多请关注php中文网其它相关文章！