返回顶部
分享到

CSS3中的字体及相关属性介绍

css 来源:互联网 作者:佚名 发布时间:2025-06-13 20:25:45 人浏览
摘要

字体 网页字体的三个来源: 用户机器上安装的字体,放心使用。 保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。 保存在你自己Web服务器上的字体,可以用@fo

字体

网页字体的三个来源:

  • 用户机器上安装的字体,放心使用。
  • 保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。
  • 保存在你自己Web服务器上的字体,可以用@font-face规则随网页一起发送到浏览器。

字体相关6属性:

font-family

font-size

font-style

font-weight

font-variant

font(简写属性)

难道字体和文本不是一回事?

当然不是。请听我解释。

字体是“文字的不同体式”或者“字的形体结构”。对于英文而言,每种字体都是由一组具

有独特样式的字母、数字和符号组成的。根据外观,字体可以分为不同的类别(font

collection),包括衬线字体(serif)、无衬线字体(sans-serif)和等宽字(monospace)。

每一类字体可以分成不同的字体族(font family),比如Times 和Helvetica。而字体族中

又可以包含不同的字型(font face),反映了相应字体族基本设计的不同变化,例如Times

Roman、Times Bold、Helvetica Condensed 和Bodoni italic。

文本就是一组字或字符,比如章标题、段落正文等等,跟使用什么字体无关。

CSS 为字体和文本分别定义了属性。字体属性主要描述一类字体的大小和外观。比如,使用

什么字体族(是Times,还是Helvitica),多大字号,粗体还是斜体。文本属性描述对文本的

处理方式。比如,行高或者字符间距多大,有没有下划线和缩进。

这就是我对字体和文本之间区别的认识。如果你想让文字加粗,或者变斜体,可以设定字体属性。而行高和缩进这种只有对文本块(比如标题和段落)才有意义的样式,则要使用文本属性设定。

字体族

例如:h2{ font-family:times, serif; }

通用字体:

  • serif,衬线字体,每个笔画末端都会有一些装饰线。
  • sans-serif,无衬线字体,字符笔画末端没有装饰线。
  • monospace,等宽字体,每个字符宽度相等,也叫代码体。
  • cursive,草书体或者手写体。
  • fantasy,其他类别字体,奇形怪状。

字体大小

h2 { font-size:18px }

大小单位:px,em,百分比。

默认字体大小为16px,也就是1em=16px.

单独讲rem单位:根em, 相对于HTML根元素,一改所有的字体大小都会改。

字体样式

值:italic(斜体)、oblique(斜体)、normal(正常字体,为了消除特殊样式)

字体粗细

值:100,200······900,或者关键字 lighter、normal、bold和bolder。

示例:a { font-weight: bold; }

常用bold和normal.

字体变化,慎用

值:small-caps(小型大写字母)、normal

示例(块引用):blockquote { font-variant(字体变形):small-caps; }

经常将small-caps用于::first-line伪元素。

简写字体属性

规则一:必须声明font-size和font-family的值。

规则二:所有值必须按如下顺序声明,font-weight,font-style,font-variant不分先后,然后是font-size,最后font-family.

1

2

3

p:nth-child(2) {

    font: bold italic small-caps 2em sans-serif;

}


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS3中的字体及相关属性介绍

    CSS3中的字体及相关属性介绍
    字体 网页字体的三个来源: 用户机器上安装的字体,放心使用。 保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页
  • JS中 this 的疑难杂症介绍
    一、this 的本质解析 this 是函数执行时的动态上下文指针,其值完全由调用方式决定。它如同汽车的方向盘,控制权在驾驶员(调用者)手中
  • CSS样式表的四种应用方式及css注释的应用
    一、外部 CSS(推荐方式) 定义:将 CSS 代码保存为独立的.css文件,通过link标签引入 HTML。 优点: 实现内容与样式完全分离 多个页面可共享
  • CSS中padding基本概念及简单写法
    CSS基础中padding详解 一、引言 在CSS布局中,padding属性是控制元素内容与其边框之间距离的关键工具。它不仅影响元素的视觉效果,还对布局
  • 使用animation.css库快速实现CSS3旋转动画效果
    CSS3在网页设计中提供了丰富的样式和动态效果,其中animation.css是一个专门用于实现动画旋转特效的开源CSS3动画库。本文将深入探讨animati
  • CSS引入方式和选择符的讲解和运用

    CSS引入方式和选择符的讲解和运用
    CSS 是一种格式化网页的标准方式,它拓展了 HTML 的功能,使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大,CSS 的
  • CSS3 Facebook-style Buttons项目常见问题及最新解决方
    CSS3 Facebook-style Buttons 项目常见问题解决方案 css3-facebook-buttons Simple CSS to recreate the appearance of Facebooks buttons and toolbars. 项目地址:https://gitcod
  • CSS3布局样式及其应用举例
    深入探讨 CSS3 布局样式及其应用 引言 在现代网页设计中,CSS(层叠样式表)不仅是设计视觉样式的工具,也是布局的核心技术。CSS3引入了
  • CSS3实现的账号密码输入框提示效果
    1. 输入框提示特效实现原理 1.1 用户界面的视觉引导 输入框是网站表单中最常见的组件之一,其提示特效为用户在填写过程中提供视觉引导
  • css中的overflow使用介绍
    title: overflow使用 date: 2025-05-07 19:41:52 tags: cssoverflow属性详解 overflow是 CSS 中控制内容溢出容器时如何显示的属性,它有以下主要功能: 1. 基本
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计