@font-face 规则

@font-face{font-family: 给下面这个字体起个名称;src: url(某某字体);
}/*引用上面的字体*/
div{font-family:给下面这个字体起个名称;
}
属性 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal

  • condensed

  • ultra-condensed

  • extra-condensed

  • semi-condensed

  • expanded

  • semi-expanded

  • extra-expanded

  • ultra-expanded

可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • normal

  • italic

  • oblique

可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal

  • bold

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

字体样式相关属性

属性

描述

font

font-style 规定字体样式。
font-variant 规定字体异体。
font-weight 规定字体粗细。
font-size/line-height 规定字体尺寸和行高。
font-family 规定字体系列。
caption 定义被标题控件(比如按钮、下拉列表等)使用的字体。
icon 定义被图标标记使用的字体。
menu 定义被下拉列表使用的字体。
message-box 定义被对话框使用的字体。
small-caption caption 字体的小型版本。
status-bar 定义被窗口状态栏使用的字体。

指定在一个声明的所有字体属性

说明:可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。

line - height属性设置行与行之间的空间。

font - family
  • family-name
  • generic-family

用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值:取决于浏览器。

inherit 规定应该从父元素继承字体系列。
指定一个元素的字体

font-size

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。

默认值:medium。

smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。
设置不同的HTML元素的字体大小
font-size-adjust
none 默认。如果此字体不可用,则不保持此字体的 x-height。
number

定义字体的 aspect 值比率。

可使用的公式:

首选字体的字体尺寸 * (font-size-adjust 值 / 可用字体的 aspect 值)=可应用到可用字体的字体尺寸

举例:

如果 14px 的 Verdana(aspect 值是 0.58)不可用,但是某个可用的字体的 aspect 值是 0.46,那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

说明:字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时,那么当此字体被设置为很小的尺寸时会更易阅读。举例:Verdana 的 aspect 值是 0.58(意味着当字体尺寸为 100px 时,它的 x-height 是 58px )。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

font-style
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
指定文本的字体样式
font-variant
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

font-variant 属性主要用于定义小型大写字母文本。

font-weight
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
设置不同的字体粗细

一直在路上,自律,坚持

CSS 第007篇 字体font相关推荐

  1. 微信小程序css篇----字体(Font)

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站. 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "fo ...

  2. html中css如何引用自定义字体 - 案例篇

    html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...

  3. CSS属性之字体(Font)

    CSS属性之字体(Font) font:[ [ "| || ]? [ / ]? ]  复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变, ...

  4. CSS自学教程--一天搞定CSS(终篇总结)

    虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...

  5. HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式

    教你如何用CSS来控制网页字体的显示样式 更新时间:2007年02月27日 00:00:00   作者: HTML对于<font>内容</font>卷标只有: <font ...

  6. 微软雅黑html中怎么写,css样式怎么设置字体为微软雅黑?

    css样式怎么设置字体为微软雅黑?下面本篇文章就来给大家介绍一下使用CSS设置字体为微软雅黑的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 首先要了解css中是如何控制字体的 ...

  7. 设计网页字体css,CSS样式设计网页字体与用户体验

    CSS样式设计网页字体与用户体验 互联网   发布时间:2009-04-02 19:36:06   作者:佚名   我要评论 网页制作Webjx文章简介:在设计网页时,没有比页面的外观更重要的了.所以 ...

  8. 学习 HTML+CSS 这一篇就够了

    文章目录 学习 HTML+CSS 这一篇就够了 ! HTML 简介 一.网页 1 .什么是网页 2. 什么是 HTML 3.网页的形成 4.网页总结 二.浏览器 1. 常用浏览器 2.浏览器内核 三. ...

  9. css实现霓虹灯特效字体

    在开始之前先了解外部字体的引入: vite中字体的引入方法(.otf字体等)如下: 1.在src下的assets文件夹下创建font文件夹,将下载好的字体包放到该文件夹下 2.在font文件夹下创建f ...

最新文章

  1. ubuntu 14.04 安装Java JDK
  2. window下的SCROLLbar的使用技巧
  3. 2016年11月14日--SQL创建数据库、表-查、插、删、改
  4. httpclient proxy 方式ssl 死锁 socketRead0问题解决
  5. 微软公有云魅力之Traffic Manager
  6. 【thinkphp3.x】ThinkPHP/Lib/Core/Model.class.php文件分析
  7. C++类型转换运算符 static_cast,dynamic_cast,reinterpret_cast,const_cast
  8. [转]js和jquery获取窗体高度
  9. echarts全国城市经纬坐标json文件
  10. 虚拟机桥接模式下配置静态IP
  11. radius认证服务器系统,03-Radius认证配置举例
  12. FSA-Net学习笔记
  13. python爬虫之scrapy
  14. 计算机管理要继续请输入,Windows 10上提示UAC错误:如要继续请输入管理员密码!...
  15. 大数据采集的几点问题的思考
  16. 数据分析师的日常工作是什么?
  17. MATLAB trapz梯形数值积分函数
  18. 计算机树表查找算法的适用场景,利用基于R-树连续最近邻查询算法来渲染雨滴,形成了逼真的下雨天场景图...
  19. 2018回顾录——花信之年
  20. ubuntu添加系统调用

热门文章

  1. 520. Detect Capital
  2. 志愿者管理系统 php,志愿者信息管理系统
  3. 简易理解设计模式之:责任链模式——OA中请假流程示例
  4. 【49.Auth2.0认证与授权过程-微博开放平台认证授权过程-百度开放平台认证授权过程-社交登录实现(微博授权)-分布式Session问题与解决方案-SpringSession整合-Redis】
  5. mac安装win7之后鼠标失灵_苹果电脑装WIN7鼠标不能动怎么处理
  6. MySQL使用存储过程批量插入百(千)万测试数据
  7. python房子_用Python研究了三千套房子,告诉你究竟是什么抬高了房价?
  8. 大数据入门级学习攻略
  9. 图说职场贴士:护航职场的八力
  10. 如何使用计算机微信看小程序,微信电脑版怎么用小程序 在哪里打开