css字体向下来电,css系列之关于字体的事
Web Font
字体类型与格式
按照字体的描述方式来分:
点阵字体
矢量字体(轮廓字体)
按照字体的表现形式来分:
衬线字体(serif):比如,宋体,Georgia,Times New Roman
非衬线字体(sans-serif):比如 Tahoma, Arial , 幼圆
其它字体:等宽字体(monospace),书写体(cursive),梦幻体(fantasy)
@font-face
语法
@font-face的取值有以下几个:
font-family:设置文本的字体名称。之后可以在定义字体的字体栈中使用这个名称。
font-style:设置文本样式
font-variant:设置文本是否大小写
font-weight:设置文本的粗细
font-stretch:设置文本是否横向拉伸变形
font-size:设置文本字体大小
src:设置自定义字体的相对路径或者绝对路径。
注意:此属性只能在@font-face规则里使用。
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
浏览器支持度
不同的浏览器会要求不同的字体文件类型:
TrueType(TTF)和OpenType(OTF)字体文件在绝大多数的浏览器上都能正常工作。
IE4—IE8要求使用特殊的字体文件格式:嵌入式OpenType(EOT)
唯一能够在Safari上正常工作的字体文件格式就是SVG,SVG在chrome、Opera上也能正常工作,但在Firefox上不行。
WOFF的含义是Web开放字体格式。越来越多的浏览器都在添加对它的支持。
这些字体格式中的一些能够互相转换。
一般在font-face中都引入各个类型的字体文件以适配所有浏览器。
/* 声明字体(图标字体) */
@font-face {
font-family: 'webfont';
src: url('font/webfont.eot'); /* IE9 */
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari、Android、IOS */
url('font/webfont.svg#webfont') format('svg'); /* ios 4.1 */
}
.myfont {
font-family: 'webfont'; /* 使用声明的字体 */
}
选择字体需要注意的问题
1、字体的中英文写法:
我们在操作系统中常常看到宋体、微软雅黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称,一般字体文件都是用英文命名的,如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示,但是有一些用户的特殊设置会导致中文声明无效。
因此,保守的做法是使用字体的字体名称(英文)或者两者兼写。如下示例:
font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";
2、声明英文字体:
绝大部分中文字体里都包含英文字母和数字,不进行英文字体声明是没有问题的,但是大多数中文字体中的英文和数字的部分都不是特别漂亮,所以建议也对英文字体进行声明。
由于英文字体中大多不包含中文,我们可以先进行英文字体的声明,这样不会影响到中文字体的选择,因此优先使用最优秀的英文字体,中文字体声明则紧随其次。如下示例:
font-family: Arial, "Microsoft YaHei";
3、照顾不同的操作系统:
英文、数字部分:在默认的操作系统中,Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体,从显示效果来看,Tahoma要比Arial更加清晰一些,因此字体设置Tahoma最好放到前面,当找不到Tahoma时再使用Arial;而在Mac中,还拥有一款更加漂亮的Helvetica字体,所以为了照顾Mac用户有更好的体验,应该更优先设置Helvetica字体;Android系统下默认的无衬线字体就可以接受,因此无需单独设置。最后,英文、数字字体的最佳写法如下:
font-family: Helvetica, Tahoma, Arial;
中文部分:在Win下,微软雅黑为大部分人最常使用的中文字体,由于很多人安装Office的缘故,Mac电脑中也会出现微软雅黑字体,因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择;同样,为了保证Mac中更为优雅字体苹方(PingFang SC)、黑体-简(Heiti SC)、冬青黑体( Hiragino Sans GB )的优先显示,需要把这些字体放到中文字体列表的最前面;同时为了照顾到Linux操作系统的体验,还需要添加文泉驿微米黑字体。最后,中文字体部分最佳写法如下:
font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
中英文整合写法:
font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
4、注意向下兼容
如果还需要考虑旧版本操作系统用户的话,不得不加上一些旧版操作系统存在的字体:Mac中的华文黑体、冬青黑体,Win中的黑体等。同样按照显示效果排列在列表后面,写法如下:
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";
加入了 STXihei(华文细黑)和 SimHei(黑体)。
5、补充字体族名称
字体族大体上分为两类:sans-serif(无衬线体)和serif(衬线体),当所有的字体都找不到时,我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好,因此我们需要在最后添加 sans-serif,写法如下:。
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
6、lang及charset
影响默认字体。
lang 属性规定元素内容的语言。
charset 属性可以通过任意元素上的 lang 属性来重写。
参考链接
css字体向下来电,css系列之关于字体的事相关推荐
- php css下划线,css如何清除下划线?css清除下划线有哪些方法
css怎么清除下划线?css去除下划线方法有哪些?很多人可能还不知道怎么操作,下面我们来讲解一下. 在css中,我们可以使用text-decoration属性来表示下划线和删除线等样式,首先我们要了解 ...
- css样式 向下补白,CSS尺寸与补白属性-----margin和padding
margin margin:[ | | auto ]{1,4} 为元素设置所有四个方向(上右下左)的外边距 auto:水平(默认)书写模式下,vertical-margin计算值为0,horizon ...
- js css鼠标经过下划线,Css、JS实现下划线动效
本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!! 实现的主要效果是利用伪类标签,以及hover,利用transfromm tr ...
- css样式 向下补白,CSS尺寸与补白
尺寸与补白 width 语法: width:长度值 | 百分比 | auto 默认值:auto 适用于:除非置换内联元素,table-row, table-row-group之外的所有元素 继承性:无 ...
- css 排版高度下一行,css排版
1. 行内盒子高度(line-height)=上下两个半铅空+内容区高度(font-size) so, if line-height为30px, font-size为22px, 则半铅空为4px. 2 ...
- html字体名称有哪些,css有哪些字体系列?
设置字体属性是样式表的最常见的用途之一.在CSS 中,有两种不同类型的字体系列:通用字体系列和特定字体系列.下面本篇文章就来给大家介绍一下CSS字体系列,希望对大家有所帮助. 字体系列 相同的字体可能 ...
- php语言字体下划线,css中怎么设置字体下划线
css中设置字体下划线的方法:1.使用"text-decoration:underline;"设置下划线样式:2.通过"border-bottom"属性设置下划 ...
- CSS知识点整理(代码示例参考w3shool)(包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等)
文章目录 CSS简介 CSS 概念 CSS 作用 CSS 语法 CSS引入方式 1.内联样式表 2.内部样式表 3.外部样式表 CSS常用样式 CSS背景 1.背景色:background-color ...
- CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
- 16.CSS选择器【下】
第十三章 CSS选择器[下] 一.伪类选择器总汇 二.结构性伪类选择器 :能够根据元素在文档中的位置选择元素,这类元素都有一个前缀(:) 1.根元素选择器 :(基本不怎么用,因为总是返回<ht ...
最新文章
- 前端防xss攻击(去掉空格等能影响和攻击数据库的字段)
- 一站式机器学习平台建设实践
- adb 命令的个人记录
- 2001~2020大数据行业怎么样?面临哪些挑战?解决了什么问题?
- cocos creator 方法数组_Creator | 优化三剑客之内存!
- 使用SuperMap对接天地图
- 【java学习之路】(javaWeb【后端】篇)007.AjaxAxios
- matlab simulink 过程控制,[转载]MATLAB/Simulink与过程控制系统
- 安卓微信自动抢红包插件优化和实现
- Linux下QT开发
- 沈阳建筑大学811c语言真题,沈阳建筑大学C语言试题.doc
- 《左耳听风》-ARTS-打卡记录-模板
- oce专项认证 oracle_Oracle Certification Program | Oracle 中国
- WIN10安装Debugging Tools for Windows
- sklearn.LabelEncoder解决未见过值问题ValueError y contains previously unseen labels [69]
- redis中存集合_如何在Redis中管理集合
- 算法学习——数字旋转方阵
- tomcat各版本下载
- 丁酉新年假期江门,甘孜旅行手记
- 2022-12-30:某天小美进入了一个迷宫探险,根据地图所示,这个迷宫里有无数个房间 序号分别为1、2、3、...入口房间的序号为1 任意序号为正整数x的房间,都与序号 2*x 和 2*x + 1