CSS字体样式属性

**语法:**font-family:具体字体名,字体集

网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:

p{ font-family:"微软雅黑";}

可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。

技巧 1. 现在网页中普遍使用14px+。

2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。

3. 各种字体之间必须使用英文状态下的逗号隔开。

4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。

5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;。

6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一: 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。 font-family: “\5FAE\8F6F\96C5\9ED1”,表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

4 font-weight 字体粗细


字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。

技巧:**

默认normal。数字 400 等价于 normal,而 700 等价于 bold。但是我们更喜欢用数字来表示。

5 font-style 字体风格


字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

**normal:**默认值,浏览器会显示标准的字体样式。

**italic:**浏览器会显示斜体的字体样式。

**oblique:**浏览器会显示倾斜的字体样式。

技巧:

平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

6 font-variant 字体变形


设置元素中文本为小型大写字母。

**语法:**font-variant:normal|small-caps。

font属性简写


font属性用于对字体样式进行综合设置,其基本语法格式如下:

选择器{``font``: font-style font-variant font-weight font-size/line-height font-family;}

使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。 ​

**注意:**其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

7 @font-face(CSS3)


@font-face的语法规则

前两项必选!

IE4开始就有这个思想了!

@font-face的取值说明

@font-face的字体格式

不兼容IE浏览器。

目前的最佳格式。不兼容手机端。

不兼容IE和火狐。

@font-face的字体的应用

最后

面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。

96道前端面试题:

常用算法面试题:

前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化

所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。

96道前端面试题:

  • [外链图片转存中…(img-tcHdwyxN-1718693373029)]

常用算法面试题:

  • [外链图片转存中…(img-dOzWi1NV-1718693373030)]

前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化

CSS字体样式属性主要包括以下几个方面: 1. **`font-family`**:这是最重要的字体属性,用于指定文本的字体系列。可以使用单一字体名、逗号分隔的字体列表(如果用户系统中有这些字体),或者使用`<family-name>`或`<generic-family>`的形式,比如 `serif`, `sans-serif`, `fantasy`, `monospace`。 示例: ```css font-family: "Arial", sans-serif; ``` 2. **`font-style`**:控制字体的风格,可以取值`normal`, `italic`, 或者`oblique`(斜体)。`oblique`并不是真实意义上的倾斜,而是相对于`italic`的一种视觉效果。 ```css font-style: italic; ``` 3. **`font-weight`**:调整字体的粗细程度,取值有预设的`lighter`, `normal`, `bold`, `bolder`, 数字(如`400`, `700`),或者百分比形式。其中`bold`和`bolder`通常代表加重,而`lighter`表示变轻。 ```css font-weight: bold; ``` 4. **`font-size`** 和 **`line-height`**:设置字体大小和行高。`font-size`接受绝对单位(像素、em等)、相对单位(百分比)或`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`这样的关键字。 ```css font-size: 16px; line-height: 1.5; ``` 5. **`font-stretch`**:可选的属性,用于改变字体的宽度,常见取值有`ultra-condensed`, `extra-condensed`, ..., `expanded`, `ultra-expanded`。 6. **`text-align`**: 设置文本对齐方式,如`left`, `right`, `center`, `justify`等。 至于设置服务器端字体,这更多是在HTML中通过`<link rel="stylesheet" href="server-side-font.css">`引用远程或本地CSS文件来实现,而不是直接在CSS中设置。这些字体只会在用户的浏览器支持的情况下显示,不受服务器控制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值