Doc/CSS_字体.md · 北京大学-张齐勋/移动端开发入门实践

font-family设置字体

font-family属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

使用建议

字体列表最后协商通用字体族
英文字体放在中文字体前面

使用Web Fonts

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {
      font-family: "myFont";
      src: url("myFont.ttf");
  }

src 指定字体资源
font-family 自定义一个名称

使用自定义字体

.line {
    font-family: 'myFont;
}

字体一般不能自由使用，必须要付费，或者遵循一些条件。不应该在没有授权的情况下偷窃字体。

@font-face {
    font-family: 'myFont';
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

src 有2部分：

url：指定要导入（下载）的字体文件的路径
format：声明字体文件的格式，它允许浏览器更快地找到可以使用的字体，可选项。 src 可以列出多个声明，用逗号分隔。浏览器按声明顺序找到它可以使用的字体，因此把最好的格式放在前面，比如WOFF2一般放在最前面，TTF放在最后面。

字体图标还记得吗？

font-style字体样式

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

font-weight字体粗细

p.normal-400 {
  font-weight: normal;
}

p.bold-700 {
  font-weight: bold;
}
p {
  font-weight: 300;
}

font-size设置字体大小

以像素设置字体大小

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

用 em 设置字体大小

1em 等于当前字体大小。如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>

使用百分比相对于父级字体大小计算

<style>
div{
    font-size:30px;
}


div .note1{
    font-size: 1em;
}

div .note2{
    font-size: 100%;
}
</style>

<div>
    <p>AAAAAAAAAA</p>
    <p class="note1">AAAAAAAAAA</p>
    <p class="note2">AAAAAAAAAA</p>
</div>

line-height设置行高

p
{
    line-height: 2
}

上面的例子中行高为字体的2倍大小.

也可以使用像素和百分比

font简写属性

在一条声明中设置所有字体属性。

font: style weight size/height family

p
{
  font:italic bold 12px/2 arial,sans-serif;
}

北京大学-张齐勋 / 移动端开发入门实践

font-family设置字体

font-style字体样式

font-weight字体粗细

font-size设置字体大小

line-height设置行高

font简写属性

简介

发行版

贡献者

近期动态

北京大学-张齐勋 / 移动端开发入门实践 .gitee-modal { width: 500px !important; }

font-family设置字体

font-style字体样式

font-weight字体粗细

font-size设置字体大小

line-height设置行高

font简写属性

简介

发行版

贡献者

近期动态

搜索帮助

北京大学-张齐勋 / 移动端开发入门实践