CSS字体的一些笔记

font

  • 是一个复合属性,如果要使用,必须有font-size和font-family(必须在font-size之后)
  • font-size/line-height简写格式,font-size总要在line-height之前
  • 使用font属性时,所有被忽略的值都会重置为默认值(要特别注意)

font-family(字体系列):

  • 有5种通用字体,serif(成比例,有上下短线),sans-serif(成比例,无上下短线),Monospace(等宽),Cursive(手写),Fantasy
  • 推荐结合字体名和通用字体一起使用
  • 什么时候用引号:
    • 当字体名中有空格,#和%之类的符号时
    • 当字体名中有匹配的关键字时(如果给通用字体加引号,用户代理将会认为你需要一个与此同名的特定字体,而不是通用字体系列了)

font-weight(字体加粗):

  • 关键字100~900(只要一个关键字对应的变形不细于前一个关键字对应的变形)
  • 400(Normal, Regular, Roman, Book)
  • 500(Medium)
  • 700(bold)
  • 没有设定500的粗度时,默认和400一样。
  • 没有指定300的粗度时,会指定成比400更细的变形。如果没有,那就和400一样。100,200同上。
  • 没有指定600的粗度时,会指定成比400更粗的变形,如果没有,和500一样。700~900同样适用。

font-size(字体大小):

  • xx-small,x-small,small,medium(默认值),large,x-large,xx-large,smaller,larger(相对于父元素)
  • 作用是为给定字体提供em框的一个大小,并不能保证实际显示的字符是这样的大小。
  • 继承的值为计算值,而不是百分数值。(用户代理对像素大小进行取整,再由子元素正常继承)

font-style(字体风格):

  • 值:italic, oblique, normal(默认), inherit

font-variant(字体变形):

  • 值:small-caps, normal, inherit
  • small-caps为小型大写字母(会将小写字母变成小型大写字母)
时间: 2024-12-24 06:10:31

CSS字体的一些笔记的相关文章

字体图标使用笔记

字体图标使用笔记: 优缺点: 首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 优点: 加载文件体积小 统一展示风格,使用方法 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单 可以添加一些视觉效果如:阴影.旋转.透明度 兼容IE6 后期维护成本很低 缺点: 制作门槛有点高,需要借助专业的工具生成字库文件 需要服务器做些相应的配置来解决识别问题和跨域问题 两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Fon

CSS字体

CSS字体 导航1.字体类型2.字体大小3.字体样式4.字体粗细 1.字体系列 font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体". 多个字体系列是用一个逗号分隔指明:实例p{font-family:"Times New Roman", Tim

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

CSS基础知识学习笔记

1.css基本样式讲解 1.1 css背景 background-attachment:背景图像是否固定或者随着页面的其余部分滚动 background-color:设置元素的背景颜色 background-image:把图片设置为背景 background-position:设置背景图片的起始位置 background-repeat:设置背景图片是否及如何重复 background-size:规定背景图片的尺寸 background-orgin:规定图片的定位区域 background-cli

CSS字体大小: em与px、pt、百分比之间的对比

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争论.找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答. 接触这些单位 1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt.Ems在本质上是可伸缩的,所以2 em相当于

《CSS mastery》 读书笔记

又翻了一下之前的读书笔记,再重温了忘掉的细节.最近一年的工作,由于有重构岗位的同学负责CSS的编写,虽说还是接触到,但毕竟不写好久了,有些东西还是忘记了,例如选择器的权重计算细节.这个笔记只是部分,后半部分快速浏览了,没写笔记. 1.元素命名规则 类名或者ID以元素是做什么的来命名,不要以元素的外观表现来命名. 类名或者ID全部小写,并用连字符号或许下划线分隔.(.add-class)2.伪类 链接伪类: :link和:visited 动态为例: :hover :active :focus 设置

CSS字体中英文名称对照表(转)

在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文件存为UTF-8 编码,在css文件开头添加以下语句:@charset "utf-8".或者在设置css字体属性值时直接使用中文字体的英文名称. 常用中文字体的英文名称对照表如下: 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti Light [ST

css 字体样式设置

css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant

css字体样式(Font Style),属性

css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"