CSS3 字体

字体大小

font-size

<span style="font-size: 16px;"> JMJC.TECH </span>

效果

JMJC.TECH


斜体

font-style

<p style="font-style: italic;"> JMJC.TECH </p> <!-- font-style: normal; | 不斜体,默认值 -->

效果

JMJC.TECH


粗体

font-weight

<p style="font-style: bold;"> JMJC.TECH </p> <!-- font-weight: normal; | 不粗体,默认值 -->

效果

JMJC.TECH


离线字体

font-family

<!-- 根据客户端操作系统的字体库,优先选择 “宋体”,假如没有宋体选择 “Georgia” -->

<span style="font-family: 宋体 ,Georgia;"> JMJC.TECH </span>

效果

JMJC.TECH


在线字体

@font-face

<!-- 一些特殊的、操作系统不自带的字体,可以通过网络在线加载 -->

<style type="text/css">
@font-face {
    font-family: ronda;
    src: url('/public/home/font/ronda.otf');
}
</style>

<span style="font-family: ronda;"> JMJC.TECH </span>

效果

JMJC.TECH

简写

font

<!-- font [斜体/加粗] 字体大小 字体类型 --> <!-- [] 内为可选参数 -->

<span style="font:italic bold 16px Georgia"> JMJC.TECH </span>

效果

JMJC.TECH

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex