CSS知识点:font小细节

font是用来设置网页字体属性的关键字,使用频率非常高,大家也比较熟悉。它有两种写法,一种是简写,一种分开写。

简写--font:italic bold 12px/20px arial,sans-serif;

分写--font-style:nomal;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:20px;font-family:"Times New Roman",arial,sans-serif;

第一行简写中12px/20px 指的是 字体大小为12px,行高为20px(相邻行间距中线间的距离)。最后两个是两种字体,如果系统不认识第一个字体,会显示后边的字体,多字体的话依次类推(为了兼容不同的浏览器,通常第一个放浏览器都认识的字体)。

font-style还有两个可选值italic oblique,看w3c 上的定义,都为”浏览器会显示一个斜体的字体样式”。貌似没有区别。其实在这些字体中有的字体本身就没有斜体,那么使用italic后也正常显示,但是使用了oblique后字体倾斜。

font-variant:small-caps的作用是将所有的字体设置为小型大写字母字体,另外还有两个可选值nomal,inherit。

时间: 2024-08-02 06:59:51

CSS知识点:font小细节的相关文章

css小细节罗列

有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样的代码来设置绝对的行高.但是当我们的需求改变,字体大小变动的时候,可能我们还需要再次改动行高,那么现在我们可以使用直接设置数字来设置行高,当我们使用纯数字来设置行高的时候,它相对于的是字体大小的倍数,也就是说下面的h4其实设置的行高也是12*2px就是24px.这样设置的好处是当我们在改变字体大小的

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7 No5.文章段落 1.文字属性 文字属性包含font-*和text-*两类. 2.基于font的属性 (1)font-family:字体属性,多个字体之前用逗号隔开.如果第一个字体没找到,则依次找后面的字体.例如: body { font-family: "Helvetica Neue", Helvetica, Arial, sans-se

这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) No5.文章段落 1.文字属性 文字属性包含font-*和tex

前台页面验证中需要注意的一个与VARCHAR2(N BYTE)和VARCHAR2(N CHAR)的小细节

1:一个小的测试实例 CREATE TABLE SALES.TEST_ ( TEST_BYTE VARCHAR2(5 BYTE), TEST_CHAR VARCHAR2(5 CHAR) )--TABLE CREATED INSERT INTO TEST_ (TEST_CHAR) VALUES('12345')--1 ROW INSERTED INSERT INTO TEST_ (TEST_BYTE) VALUES('12345')--1 ROW INSERTED INSERT INTO TEST

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

APP设计当中不容忽视的20个小细节

1.一致,一致,还是一致你能做的最重要的事情就是保证用户界面运作的一致性.对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应该有同样的事件发生.所有窗口按钮的位置要一致,标签和讯息的措辞要一致,颜色方案要一致.用户界面的—致性使得在用户对于界面运作建立起精确的心理模型,从而降低培训和支持成本.提炼:一致性体现在 色彩搭配和运用.字体的运用.相同的交互效果等.一般我们使用的色彩不超过3种.交互效果也不超过3种.2.建立标准并遵循之在应用软件中保持一致的唯一途径就

你所不知道的 CSS 负值技巧与细节

原文:你所不知道的 CSS 负值技巧与细节 写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号.嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: <div></div> div { width: 200px; height: 200px; outline: 20px solid #000; outline-of

apache配置虚拟主机时需要注意到几个小细节

如今apache在web服务器这块市场占有率还是很高的,而配置虚拟主机现在也是用的非常多,不过在配置虚拟主机的时候一定要注意几个小细节. 首先要注意你的apache版本,注意是2.2还是2.4的. 配置2.2的时候,配置虚拟主机该这样写: NameVirtualHost ip:80   //注意此处与2.4不同 <VirtualHost ip:80> ServerName www1.myweb.com DocumentRoot "/myweb/vhost/www1" <

关于if语句中的小细节

if语句都会用,但是有一些小细节并不容易被发现. 比如我们不应该写这样的代码: if(flag==0) flag为布尔变量,布尔变量的值为真或假,用0表示假,真是多少是不一样的. 所以我们应该避免将布尔变量与0或1这样的整型值进行比较. 那么我们也不应该写这样的代码: if(i) i为一个整型变量,但是写成上面那样就会被人误以为是布尔值,良好的编程习惯是这样的: if(i==0)或if(i!=0) 还有重要的一点是,我们不能将float型和double型数据与0这种整型变量进行==或!=. 因为