java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本

网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本

字体

首先要有一个认识字体和文本不是一个东西哦。字体是不同的文本体式或者可以说是字的形体结构。对于英文来说有很多种不同的样式包括字母、数字和符号组成的。

文本指的是通过文本属性描述对文本的处理方式。行高,字符间距,缩进等。

那么网页中的字体是哪里来的呢?其中有哪些属性?文本属性中有哪些小秘密呐?

来源

用户机器中安装的字体

保存在第三方网站上的字体(link)

保存在服务器上的字体。这些字体可以使用@font-face规则随网页一起发给浏览器(一般字体图片都会放到一个单独的服务器上,更加的优化)

字体属性

font-family

字体族

font-family用于设定元素中的文本使用什么字体。通常给一个文档页面设置一个主字体(因为font-family是可以继承的),然后针对那些需要使用不用样式的字体在单独应用font-family。

因为字体来源我们已经知道了,两条路径要么是用户机器,要么是网上,那么就存在某种字体不能再某个网页中使用的可能。所以需要给出一组字体,这组字体叫做字体栈 。

简单的来说就是就是预备队,如果用户机器上没有某种字体,预备的字体就用作用了,用户还可以使用另一种字体阅读。

/*font-family的值不区分大小写 但是如果引入的是在线字体库请不要随意修改有可能导致无法使用提供的定制字体*/body

font-size

字体大小

浏览器样式表默认为每个HTML元素都设定了font-size,言外之意是我们在设置font-size的时候其实是在修改默认值。字体大小的单位px、%、em。但是有一个很重要的点是字体的大小也是可以去继承的这个地方可能会出现一些未知的错误。

px是一个很常见的单位,em也是一个单位有什么区别呢?

px是绝对单位,em是一种相对单位与百分比是一样的,浏览器默认样式表在设定所有元素的字体大小时使用的都是相对单位em,h1被设定为2em,h2是1.5em,p是1em。默认情况下1em = 16px。这也是font-size的基准大小。

example 1

tip:其它的以绝对单位设定的会重新设定字体的大小,不会产生继承。同时我们在设定的时候可以选择关键字值,比如x-small,medium,x-large等等 ,当然用的很少,你会在浏览器看到medium感兴趣的可以去观察一下吧。

example 2

example 3

tip:使用绝对单位的好处是,在祖先元素的字体大小变化时,不会出现意外的连锁反应。

font-style

字体样式

font-weight

字体粗细

这个貌似没什么好说的,还是过了吧。主要一点最好使用bold,normal当然strong标签是加粗的状态,你们应该懂我的意思。

font-variant

字体变化

font

简写,复合写法

强调两个规则

rule

必须声明size与family。

顺序 font-weight、font-style、font-variant随意调换,其次font-size,font-family。

同时还可以设置行高 font:bold italic small-caps 16px/1.5 ‘Microsoft yahei’ 16px/1.5的这个1.5代表的是倍数。

本文来自企鹅号 - 天弘媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韦弦的偶尔分享

微信小程序分享图片的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

2312
来自专栏cnblogs

Bootstrap源码分析之nav、collapse

导航分析(nav): 源码文件: _navs.scss:导航模块 Mixins/_nav-divider.scss:分隔线 Mixins/_nav-vertic...

3218
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1281
来自专栏企鹅号快讯

Web前端,认识css,css规格,伪类和伪元素的用法,代码详解!

认识 CSS — Cascading Style Sheets CSS的世界是神奇的。随着浏览器WEB标准的日趋统一,CSS在WEB世界中的扮演的角色也越来越重...

2086
来自专栏河湾欢儿的专栏

css3过渡与动画

过渡 当触发的时候会有过渡的效果 1.transition-property:none|all|某一个属性值 2.transition-duration:...

8741
来自专栏守候书阁

canvas入门实战--邀请卡生成与下载

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是j...

1183
来自专栏LeoXu的博客

布局和容器 原

1543
来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

2027
来自专栏coding for love

CSS进阶08-绝对定位 Absolute Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

881
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.7K9

扫码关注云+社区

领取腾讯云代金券