CSS属性 – font-family (重要, 不过一般仅设置一次)

最新推荐文章于 2025-10-11 18:31:08 发布
原创 最新推荐文章于 2025-10-11 18:31:08 发布 · 526 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

本文解析了font-family在网页设计中的应用，介绍了如何设置多个字体及浏览器的字体选择策略，重点聚焦淘宝常用的字体资源和实践应用。

font-family用于设置文字的字体名称

  • 可以设置1个或者多个字体名称;
  • 浏览器会选择列表中第一个该计算机上有安装的字体;
  • 或者是通过 @font-face 指定的可以直接下载的字体;

淘宝使用的字体
在这里插入图片描述

CSS font-family 属性
shengyin714959的博客
09-12 863
font - family属性指定一个元素的字体。font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。- 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。- 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。
CSS @符规则（@font-face、@keyframes、@media、@scope等）
weixin_50367873的博客
02-21 3195
CSS @ 规则（@font-face、@keyframes、@media、@scope等）
css中默认中文字体font-family列表
09-25
css中文字体font-family列表主要是系统自带的一些、装Office会生出来的一些、Windows的一些，感兴趣的朋友可以了解下
深入解析 CSS `font-family` 属性
2501_93104808的博客
10-11 357
摘要： CSS font-family 属性用于定义元素的字体系列，通过优先级列表确保兼容性（首选字体→备用字体→通用字体）。支持特定字体名称（带空格的需引号）和5种通用字体家族（serif、sans-serif等），并提供继承与回退机制。最佳实践包括：优先使用易读字体、末尾添加通用字体、优化网页字体性能（如WOFF2格式），并注意引号规范。该属性广泛兼容且继承父级设置，是控制网页排版的核心属性。
详解中文字体在CSS样式中font-family对应的英文名称
11-19
宋体：SimSun 黑体：SimHei 微软雅黑：Microsoft YaHei 微软正黑体：Microsoft JhengHei 新宋体：NSimSun 新细明体：PMingLiU 细明体：MingLiU 标楷体：DFKai-SB 仿宋：FangSong 楷体：KaiTi 仿宋_GB2312：FangSong_GB2312 楷体_GB2312：KaiTi_GB2312 宋体：SimSuncss中中文字体（font-family）的英文名称
CSS字体样式属性调试
Web_chicken的博客
09-08 8110
CSS字体样式属性调试 1.font-size font-size属性用于设置字号 p { font-size:20px; 2.font-family font-family用于设置字体 p { font-family:"Mirsoft YaHei"； } 网页中常用字体有宋体，微软雅黑，黑体等 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个,直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。 p { font-family:"Mirsoft YaHei"
font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;
08-12
首先，用户的问题是：“我想Understanding or applying CSS font styling techniques 请问CSS font-family and text styling best practices”，翻译成中文是：“我想了解或应用CSS字体样式技术，请问CSS font-...
<head> <title>HTTP Status 500 – Internal Server Error</title> <style type="text/css"> h1 { font-family: Tahoma, Arial, sans-serif; color: white; background-color: #525D76; font-size: 22px; } h2 { font-family: Tahoma, Arial, sans-serif; color: white; background-color: #525D76; font-size: 16px; } h3 { font-family: Tahoma, Arial, sans-serif; color: white; background-color: #525D76; font-size: 14px; } body { font-family: Tahoma, Arial, sans-serif; color: black; background-color: white; } b { font-family: Tahoma, Arial, sans-serif; color: white; background-color: #525D76; } p { font-family: Tahoma, Arial, sans-serif; background: white; color: black; font-size: 12px; } a { color: black; } a.name { color: black; } .line { height: 1px; background-color: #525D76; border: none; } </style> </head>
最新发布
12-03
同时，在 JSP 文件创建表单时，`name` 属性要标识正确。例如，确保在转换年龄时传入的是年龄的字符串值，而不是其他非数字字符串值[^4]。 ### SQL 语法错误 若报错为 `Error selecting key or setting result to ...
<!doctype html><html lang="en"><head><title>HTTP Status 400 – Bad Request</title><style type="text/css">h1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} h2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} h3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} body {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} b {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} p {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;} a {color:black;} a.name {color:black;} .line {height:1px;background-color:#525D76;border:none;}</style></head><body><h1>HTTP Status 400 – Bad Request</h1></body></html>
07-10
Tomcat，可以在 `server.xml` 中找到 Connector 元素并适当增加 `maxHttpFormPostSize` 属性值（适用于表单提交），而对于一般的请求行长度限制，则需修改 `max-swallow-size` 或者调整操作系统级别的网络设置。...
【CSS所有属性及用法】
qq_38869966的博客
08-26 1579
@[TOC]CSS所有属性及用法CSS（层叠样式表）具有丰富的属性，以下是对一些主要属性的介绍及用法：一、字体属性1. font-family ：指定文本的字体。二、文本属性1. color ：设置文本颜色。三、背景属性1. background-color ：设置背景颜色。四、边框属性1. border-width ：设置边框的宽度。五、盒模型属性1. width 和 height ：分别设置元素的宽度和高度。六、布局属性1. display ：确定元素的显示类型，如块级、行内、行内块等。七、
css的font-family属性
2301_76255666的博客
07-06 839
在css中使用font属性可以设置丰富的字体，梅花页面的外观。其中font-family专门用于设置字体名称系列。
CSS 字体 font-family属性
歪脖先生的博客
02-11 9548
字体CSS规范清楚的认识到，字体选择是一个常见而且很重要的特性，所以设置字体的属性就是样式表中最常见的用途之一。字体相关的属性在CSS1就已经定义，CSS3又新增了font-stretch 和 font-size-adjust 这两个属性。人们早已认识到字体选择很重要，并在CSS2就支持可下载字体，也定义了 @font-face 相关属性，但是并没有得到浏览器的广泛支持。直到CSS3，浏览器才开始...
css font-family
siri99999的博客
10-24 752
本文介绍HTML中自带的字体： 黑体：SimHei 宋体：SimSun 新宋体：NSimSun 仿宋：FangSong 楷体：KaiTi 仿宋_GB2312：FangSong_GB2312 楷体_GB2312：KaiTi_GB2312 微软雅黑体：Microsoft YaHei 隶书：LiSu 幼圆：YouYuan 华文细黑：STXihei 华文楷体：STKaiti 华文宋体：STSong 华文中...
耐人寻味的CSS属性font-family
前端原创分享，常年坚持记录和分享，全网阅读量超百万
10-23 721
font-family是一个网站用户体验的第一入口，非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体，接着了解中英文的常用字体及其适用性。
【CSS】font-family的相关字体设置
热门推荐
smart_dream
03-19 2万+
大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面我们逐步的分析一下： 一、字体基础知识 css 中的font-family font-family 关键字 对于 CSS 中的font-family而言，它有两类取值。 一类是类似这样的具体的字体族名定义：font-family: Arial这里定义了一个具体的字体样式，字体族名为Arial; 一类是通用字体族名，它...
CSS font-family的使用
whaxrl的专栏
04-25 3675
一、语法 font-family：[ | ] [, | ]*   说明   1、：字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起 2、：字体序列名称。下列字体中的任何一种：serif, sans-serif, cursive, fantasy, monospace。 3、想要显示的字体一定要是你计算机中有的,否则不会按照你期望的显示.上
CSS font-family 各名称一览表
荆轲刺秦王
01-03 2791
（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; （淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; （京东）： font: 12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值