码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式中字体和大小

时间:2018-05-24 20:46:19      阅读:823      评论:0      收藏:0      [点我收藏+]

标签:ros   写法   org   ice   gen   名称   它的   bsp   华文楷体   

1、css中引入外部字体文件:

 

@font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3。目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题。

 

@font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制。只需将字体包安装在服务器上,当用户加载网页时,字体包会自动下载到用户机器上,保证字体能够正确渲染。

网页设计师一定不会满足于使用这些安全字体,如何才能使用漂亮的字体,并能在普通用户的浏览器中被正确的渲染出来?答案是:使用@font-face

 

@font-face {
font-family: "AncientWar";
src: url(‘style/css/fonts/AncientWar.ttf‘);
}

 2、搞清楚PS中字体pt与px之间的关系以及转化:

1)以下是我们常见的单位

 px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;
 pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
 em:即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性.

2)PX和PT转换的公式:

pt=px乘以3/4。

比如12px×3/4=9pt大小。

PX和em转换的公式:

对于PX转em的方法也类似,就是em=16乘以px,也就是说1.5em=1.5×16=24px。

 

3、什么是安全字体(在网页开发中,应该尽量使用安全字体,也就是高度通用的字体)

安全字体这个概念,也许很多人都不是很熟悉,我们先举个例子:

font-family: Arial, Helvetica, sans-serif;

这个对字体(font-family)的定义就是一个安全字体。每种操作系统都有自己默认安装的字体,浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同,有的甚至名称都不一样,在这种情况下,我们必须定义安全字体,使字体在所有的浏览器中都能够正常显示。

在上面这个 font-family 的定义中,我们选择 Arial 作为首选字体(注:Arial 字体是最常用的 sans serif 字体,也是 Windows 的默认字体,当字体很小是不容易阅读),但是,苹果系统中没有这个字体,所以我们选择 Helvetica(和 Arial 很相似)作为第二备选字体,最后我们选择 sans-serif 作为第三备选字体,如果在一个既没有 Arial 也没有 Helvetica 的系统里,那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样,我们很大程度上保证了使用不同操作系统的访问者都能看到相同(至少是类似)的页面文字。

除了 Arial,常见的安全字体还有:

  • Verdana 字体,它是微软公司的核心字体之一,专门为屏幕显示而开发的。它的应用广泛,宽度大而易于阅读,是显示器中最清晰的字体。CSS 写法:font-family: Verdana, Geneva, sans-serif;
  • Times New Roman 字体,它是最常用的 serif 字体,是浏览器默认的字体。小号字的易读性也很差。CSS 写法:font-family: ‘Times New Roman‘, Times, serif;、

4、CSS字体名称(CSS中的五大字体家族{font-family:serif,sans-serif,fantasy,cursive}

1)常用的一些字体

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

2)Windows的一些字体

新細明體:PMingLiU

細明體:MingLiU

標楷體:DFKai-SB

黑体:SimHei

新宋体:NSimSun

仿宋:FangSong

楷体:KaiTi

仿宋_GB2312:FangSong_GB2312

楷体_GB2312:KaiTi_GB2312

微軟正黑體:Microsoft JhengHei

微软雅黑体:Microsoft YaHei

装Office会生出来的一些:

隶书:LiSu

幼圆:YouYuan

华文细黑:STXihei

华文楷体:STKaiti

华文宋体:STSong

华文中宋:STZhongsong

华文仿宋:STFangsong

方正舒体:FZShuTi

方正姚体:FZYaoti

华文彩云:STCaiyun

华文琥珀:STHupo

华文隶书:STLiti

华文行楷:STXingkai

华文新魏:STXinwei

3)英文字体

Arial

Helvetica

Tahoma

Verdana

Lucida Grande

Times New Roman

Georgia

PmingLiu

Impact

Book Antiqua

Century Gothic

Courier New

sans-serif

 

CSS样式中字体和大小

标签:ros   写法   org   ice   gen   名称   它的   bsp   华文楷体   

原文地址:https://www.cnblogs.com/dengqp-share/p/9084817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!