css电脑字体,CSS字体
CSS字体属性定义字体家族,粗细,大小,和文本的样式。
Serif 和 Sans-serif 字体的区别
CSS 字体
在CSS里面, 有两个类型的字体家族:
通称族 - 一组具有相似外观的字体族 (像 "Serif" 或者 "Monospace")
字形体系 - 一个特定的字体族 (像 "Times New Roman" 或者 "Arial")
通称族
字形体系
描述
Serif
Times New Roman
Georgia
衬线字体,一些字符两端有小的线
Sans-serif
Arial
Verdana
"Sans" 是指没有-这些字体没有在文字两端的线
Monospace
Courier New
Lucida Console
所有字符宽度相同注意:在计算机屏幕上,无衬线字体,被认为是比衬线字体容易阅读。
字形体系
文本的字体系列使用 font-family 属性设置.
font-family 属性应将几个字体名称作为 "fallback" 系统. 如果浏览器不支持第一个字体,它尝试下一个字体,等等。
从你想要的字体开始,用一个通用的家庭结束,让浏览器在泛型家庭中选择一个类似的字体,如果没有其他字体可用的话。
注意:如果一个字体家族的名字超过一个单词,它必须是引号, 像: "Times New Roman".
在逗号分隔列表中指定多个字体家族.:
p {
font-family: "Times New Roman", Times, serif;
}
字形
font-style 属性是用来指定斜体。
此属性有三个值:
normal - 文本显示正常
italic - 他文本以斜体显示
oblique - 文本是“倾斜”的 (oblique 和 italic非常相似, 但支持的很少)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
字体大小
font-size 属性设置文本的大小。
能够管理文本大小在网页设计中很重要。但是,您不应该使用字体大小调整,使段落看起来像标题,或标题看起来像段落。
总是使用正确的HTML标签, 像
-
是标题 ,
是段落。
font-size 值可以是绝对值,也可以是相对大小。
绝对大小:
将文本设置为指定的大小
不允许用户在所有浏览器中更改文本大小.
绝对大小是有用的,当输出的物理尺寸是已知的
相对大小:
设置相对于周围元素的大小
允许用户更改浏览器中的文本大小.
注意:如果你没有指定字体大小,默认大小为浏览器的正常文本,如段落, 是16px (16px=1em).
用像素设置字体大小
使用像素设置文本大小使您完全控制文本大小:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
提示:如果使用像素,仍然可以使用缩放工具调整整页的大小.。
用Em设置字体大小
为了允许用户调整文本大小(在浏览器菜单中),许多开发人员使用EM而不是像素。
W3C 推荐使用em大小.
1em 等于当前的字体大小. 浏览器中的默认文本大小为 16px. 因此,对1em默认大小 16px.
使用这个公式可以计算从像素到EM的转换: pixels/16=em
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 */
}
在上面的示例中,EM中的文本大小与前一个示例的像素相同。然而,使用EM的大小,它是可以调整文本大小在所有浏览器。
不幸的是,仍然有一个问题与旧版本的IE浏览器,文本变得大于它应该什么时候做得更大,小的比要小。
混合使用Em和百分比
在所有浏览器中工作的解决方案, 使用百分比,设置默认 font-size 在
元素中:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
我们的代码现在工作的非常好!它在所有浏览器中显示相同的文本大小,并允许所有浏览器缩放或调整文本大小!
字体权重
font-weight属性指定字体的权重:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
字体变形
font-variant 属性指定是否应以小大写字体显示文本..
使用 small-caps 字体, 所有的小写字母转换为大写字母. 然而,转换后的大写字母呈现一个较小的字体大小比原来的大写字母的文本。
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
所有的CSS字体属性
属性
描述
在一个声明中设置所有字体属性.
指定文本的字体大小
指定是否应在小大写字体中显示文本.
css电脑字体,CSS字体相关推荐
- html中css修改字体,CSS字体设置 DIV内字体设置
CSS设置字体 DIV内文字字体花样如何配置,怎样设置装备摆设对象内笔墨字体样式,比喻黑体.宋体.微软雅黑.英翰墨体等字体如何设置装备摆设? 一.font标签配置字体 我被设置装备摆设为微软雅黑 fo ...
- webpack笔记一:webpack的介绍,安装,加载css、图片、字体等
写在前面的话: 在当前grunt.gulp.webpack成为日常工具的情况下,如果你还只是熟练的使用html.css和激块瑞的话,已经远远不能满足项目的需求,所以你得变强,你需要懂得更多.现在前端不 ...
- html布局文字设置,div css布局中css中文字体设置
在HTML网页结构中,会用到中文字,而中文字有得多中笔墨体,有的开发者在自身电脑中下载并安装不少摩登字体.而这些中文字体CSS设置装备摆设提倡? 1.不克不及随意CSS设置装备摆设本人安装中笔墨体 假 ...
- html css修改span的字体的值,一、编辑网页文本(span标签与字体属性、文本属性)...
一.本课目标 掌握字体属性的使用 掌握文本排版样式的使用 为什么使用CSS? 有效的传递页面信息 使用CSS美化过的页面文本,漂亮,美观,吸引用户 可以很好的突出页面的主题内容,使用户第一眼可以看到页 ...
- CSS精灵技术与字体图标
CSS精灵技术(sprite) 精灵技术产生的背景 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- css里设置的字体英文对照
Mac OS 华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑 华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体 ...
- CSS基础选择器、字体和文本样式
一.CSS简介 美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
- html css调用自定义字体,css怎么自定义字体样式?
在CSS中,可以通过@font-face规则来指定一个用于显示文本的自定义字体.@font-face规则允许网页开发者为其网页指定自定义的字体, 通过这种自定义字体的方式,可以消除对用户电脑字体的依赖 ...
- css基本样式之字体样式
css基本样式之字体样式 1.代表字体样式的单词 font,字体样式前面都加上font- 2.设置字体大小 2.1 语法 语法: font-size:像素值; 与font标签(html中)里面的siz ...
- CSS基础(基础选择器+字体文本相关样式)
文章目录 目录 前言 一.css的语法规则 二.css引入方式 三.基础选择器 四.字体和文本样式 字体样式 文本样式 line-height行高 前言 层叠样式表(Cascading Style S ...
最新文章
- html的高度自适应,CSS布局自适应高度解决方法
- mysql转oracle注意事项
- docker容器mysql头文件_在Docker容器中使用MySQL数据库
- java调用kafka接口发送数据_Java调用Kafka生产者,消费者Api及相关配置说明
- 服务器控件HtmlTable下控件赋值问题
- 【POJ】2065 SETI
- Ubuntu中apt与apt-get命令的区别
- hdu2066----------dijkstra模板题
- kafka jar包_和同事交流不会kafka怎么行,API奉上,不是大神也能编
- php获取银行logo,依据银行卡号获取银行信息php代码
- Au入门系列之九:多轨混音
- 前端面试总结2018.07
- 异步时间扭曲(Asynchronous Timewarp简称ATW)一种生成中间帧技术
- LeedCode 717 1比特与2比特字符
- 基于物联网的智能厨房安全监测系统-上位机程序
- C++面向对象程序设计
- 超快自旋电子学为电子信息新材料开辟了道路
- Two Arrays And Swaps
- uclinux开发概述
- OA项目(部门管理模块)上
热门文章
- 佳能打印机删掉又会自动加载的原因及解决方案
- 口袋妖怪java诺基亚n97,诺基亚N97解析:细节设计与接口
- CSDN-我的在线学习笔记分享平台
- JavaScript实现拖动滑块验证(方法已封装)
- 【在JS中如何获取图片路径以及更改图片】
- 天翼博览会抢先看:“互联网+”引领智慧生活
- 默纳克电梯系统服务器怎么用,默纳克系统电梯工作原理说明(四)电梯的运行过程...
- steam游戏打不开的可能性收集
- 电池内阻测试仪软件,fluke BT500 系列蓄电池内阻分析仪| 福禄克 | 福禄克
- python pycrypto 加密解密