font-family默认字体,font family字体大全

http://www.itjxue.com  2023-01-09 06:18  来源:未知  点击次数: 

浅谈下页面中字体设置(font-family)和粗细(font-weight)问题

记得以前某某某天上午被设计师“调戏”了,记忆犹新啊,就是因为一个项目(PC和移动)中的字体问题,纠结了一上午,设计师非要字体效果跟设计稿上保持一致。那时那刻,我已无语,但是话说回来,大家都是为了项目的质量,所以得放平心态,反思,于是“诞生了”今天下午要分享的话题:CSS中的字体设置。

谈到“CSS中的字体”,老生常谈的话题了,做过设计和前端的童鞋都会略知一些其中的“奥妙”。在平时工作中,完成一个项目,从设计稿到页面最终的输出效果,就字体方面来说,细心的童鞋会发现有很多方面细活要去做的,当然了,这是建立在项目本身要求非常高的情况下。今天下午从两方面来讨论:设置(font-family)和粗细(font-weight)。

在写全局样式时,我们都会去设置一个默认的字体,举个例子:

上面的设置,页面上首选字体是平方字体,如电脑上没平方字体,就是显示微软雅黑,依次类推...

在设置一些中文字体的时候,有些童鞋(以前的我)喜欢直接用中文,其实不太好哟,还是回归到统一的英文,在这里分享一些常用中文转英文的字体:

大家可以收藏起来,便于查阅。

据我了解,不管是PC还是移动端,现在的设计师默认字体,中文的一般都习惯于“微软雅黑”、“微软正黑体”,“平方字体”;英文的选择比较多,常用的有arial等。由于PC设备不足,目前只有WINDOWS,效果跟设计稿出入不大。但是在移动端有时候就会纠结了,其原因就是我们不了解移动端不同设备自带的默认字体。当你跟设计师纠结此事时,作为前端攻城师,需要拿些证据去跟他们去理论。如下:

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

可以发现无论是ios、android还是wp系统中都是没有微软雅黑字体的,随后做了一个小测试,就是将微软雅黑字体的效果和各个系统默认字体的效果做了一下对比,发现无论页面中使用哪种字体,肉眼很难看出它们的差异,对产品的体验几乎没有影响。

各个手机系统有自己的默认字体,且都不支持微软雅黑。

如无特殊需求,手机端无需定义中文字体,使用系统默认。

英文字体和数字字体可使用 Helvetica ,三种系统都支持。

OK,证据确凿。如果设计师需要用到一些特殊的英文字体,比如漂亮的din1451a,akzidenzgrotesk-cond等,我们需要转换下,然后用@font-face引用下即可,这个方法不多说,so easy

关于字体设置(font-family)的问题,就聊这么多吧。下一个问题:CSS字体粗细(font-weight)。

首先我们了解下font-weight的基本属性值,如下表格:

400等同于normal,而700等同于bold。

inherit规定应该从父元素继承字体的粗细。

不过感觉效果不明显。只能换个字体试试。不过比较常见的中文字体里,感觉黑体比较粗些吧。我们看个简单的例子,WINDOWS系统PC端效果:

可以根据值的设置,可以轻松搞定字体的粗细。细心的童鞋发现,如果设置font-weight:901会怎样,设置font-weight:99又会是啥效果,哈哈 _ ,我不说,您可以去尝试。公司穷,不给配置高大上的设备,至于其他系统下的PC加粗效果,大家可以去测试下,我要说的重点是在移动端。

如果你对安卓和IOS前期的版本有了解的话,发现它们对于字体加粗属性很乱,支持性不太好,无论你怎么设置都无效,说白了就是系统BUG,这里就不讨论那些老掉牙的问题了,我们是要先前看, _ 。

CSS字体设置(font-family)和粗细(font-weight)在不同设备和系统下的差别,会给前端工程师在开发项目时带来一些不便,尤其是在移动端,比如我想用一个特殊字符:五角星,箭头,圆点,箭头等等,用字体直接去设置效果,最终出来的效果出来不尽人意,这个大家可以去测试下便知,代替方法就是用CSS3、图和base64等。

OK,大概就这么多,希望能帮助到大家吧。

font family字体有哪些,求全一点的,最好图文结合。(CSS中用的)

一些常用的font-family包括:

font-family:?"微软雅黑","华文细黑",Arial,?Helvetica,?sans-serif;font-family:"宋体",?"Times?New?Roman",?Times,?serif;font-faily:"华文细黑",Courier?New,?Courier,?monospacefont-family:?"华文仿宋",Georgia,?"Times?New?Roman",?Times,?serif;font-family:"黑体",?Verdana,?Arial,?Helvetica,?sans-serif;font-family:"方正姚体",?Geneva,?Arial,?Helvetica,?sans-serif;

微软雅黑是windows?vista的默认字体,对windows?xp用户来说,把它放在“华文细黑”或者“宋体”之前是不错的主意,可以让windows?xp用户也体验到微软雅兴黑字体的漂亮,前提是客户端也安装了雅黑字体。

部分字体截图如下:

浏览器默认字体是什么

浏览器内显示的网页字体根据网站一般可能也是不同的,这个是由网页的开发者来决定的,一般在css可以使用font-family来设置网页的默认字体,如果用户的系统上没有该字体则会使用系统默认字体。

工具原料:编辑器、浏览器

1、使用font-family属性来设置网页的字体,简单的代码示例如下:

html

head

style?type="text/css"

p.serif{font-family:"Times?New?Roman",Georgia,Serif}

p.sansserif{font-family:Arial,Verdana,Sans-serif}

/style

/head

body

h1CSS?font-family/h1

p?class="serif"This?is?a?paragraph,?shown?in?the?Times?New?Roman?font./p

p?class="sansserif"This?is?a?paragraph,?shown?in?the?Arial?font./p

/body

/html

2、运行的结果如下:

CSS中font-family标签中的字体格式问题

你说的是定义字体的,一般默认的是宋体。

英文字体名不需要 “”引号,但是如果英文字体名中间有空格就要加上引号才好!如: "sfel forn"

中午的要加引号如:“黑体”。

---------

常用的定义

style

body{

font-size:12px; /*定义字体大小12像素、颜色为黑色*/

color:#000000;

}

a{color:#0000ff} /*定义链接为蓝色*/

a:hover{color:#ff0000} /*鼠标指向链接的时候变为红色*/

input{border:1px dashed #ccc;} /*定义文本框和按钮边框为灰色的虚线边框*/

/style

上面都是我写的哦,给我加分吧。 有什么不懂的加我QQ: 20547864

或者到 提交你的问题吧

(责任编辑:IT教学网)

更多

推荐CSS教程文章