html5--6-16 CSS3中的文字与字体

中文字体包很大,少量字体的话可以有其它方法。

有字库-首页-全球第一中文web font(在线字体)服务平台、web font、webfont、在线字体、网络字体
https://www.youziku.com/

学习要点

  • 掌握文字与字体的设置

颜色值查询方法:

  • 百度查询,很多网站有提供
  • 下载相关手册等需要时查表
  • 运用绘图工具中的拾色器

CSS中常用的字体属性设置

  • font-size 规定文本的字体尺寸
    • 通常使用px,百分比,em来设置字体的大小
      • em是css中的相对单位,是相对于当前对象内的字体尺寸,若没有制定文字大小尺寸,则为浏览器默认字体大小
    • xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸,默认值:medium。
    • smaller 把 font-size 设置为比父元素更小的尺寸。
    • arger 把 font-size 设置为比父元素更大的尺寸。
  • font-variant:规定是否以小型大写字母的字体显示文本。
    • normal 默认值。浏览器会显示一个标准的字体。
    • small-caps 浏览器会显示小型大写字母的字体。
  • font-style:规定文本的字体样式。
    • normal 默认值。浏览器会显示一个标准的字体。
    • italic 浏览器会显示一个斜体的字体样式。
    • oblique 浏览器会显示一个倾斜的字体样式。暂时不作讲解,了解即可
  • font-weight:规定字体的粗细。
    • normal 默认值。定义标准的字符。
    • bold 定义粗体字符。
    • bolder 定义更粗的字符。lighter 定义更细的字符。
    • 100-900;定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
  • font-family:规定文本的字体系列。
  • font:在一个声明中设置所有字体属性
    • 这个简写属性用于一次设置元素字体的两个或更多方面。
    • 至少要指定字体大小和字体系列
    • 可以按顺序设置如下属性:font-style/font-variant/font-weight/font-size/font-family
  • @font-face:嵌入字体
  • 注:字体的设置还有其他几个很少的用到的属性,比如font-size-adjust为元素规定 aspect 值;font-stretch 收缩或拉伸当前的字体系列。都很少用到或者多数浏览器不支持,就不作讲解

html5--6-16 CSS3中的文字与字体的更多相关文章

  1. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

  2. html5--6-19 CSS3中的文字与字体

    html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...

  3. CSS3中与文字相关的样式

    1.给文字添加阴影:text-shadow属性(特别指出IE浏览器要IE10+的版本才支持)    语法如下: text-shadow:length length length color; 其中,第 ...

  4. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  5. css3中@font-face模块自定义字体

    一.@font-face模块介绍 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,在Web的开发中使用字体不再只能使用W ...

  6. [CSS3]学习笔记-文字与字体相关样式

    1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  7. 文字排版--字体(font-family)

    我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:"宋体"; ...

  8. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  9. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

随机推荐

  1. gridview和detailsview的完美结合运用实现增删改

    原文发布时间为:2008-07-24 -- 来源于本人的百度文章 [由搬家工具导入] 1、因Gridview中没有增加记录,所以应利用datalistview或formview来弥补。 2、因为det ...

  2. php生成压缩包

    $filename = "./" . date ( 'YmdH' ) . ".zip"; // 最终生成的文件名(含路径) // 生成文件 $zip = new ...

  3. OC-为何用copy修饰block

    简单来说,block就像一个函数指针,指向我们要使用的函数. 就和函数调用一样的,不管你在哪里写了这个block,只要你把它放在了内存中(通过调用存在这个block的方 法或者是函数),不管放在栈中还 ...

  4. 带你学Node系列之express-CRUD

    前言 hello,小伙伴们,我是你们的pubdreamcc,本篇博文出至于我的GitHub仓库node学习教程资料,欢迎小伙伴们点赞和star,你们的点赞是我持续更新的动力. GitHub仓库地址:n ...

  5. P3367 并查集【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3367#sub 题目描述 如题,现在有一个并查集,你需要完成合并和查询操作. 输入输出格式 输入格式: 第一行包含两个整 ...

  6. Jetson TK1 二:usb无线网卡的使用

    一.总体是按照群里的文档“TK1连接无线网络”的步骤操作的,但也遇到了一些问题,如下: 1.自动配置设备并下载内核源代码到指定的目录下时(估计是解压时),出现时间超前之类的问题,原因是当前本地时间是几 ...

  7. Spring实战Day7面向切面编程术语介绍

    #### 面向切面编程 为什么需要切面? 有些功能需要在应用中的多个地方使用到,但是我们又不想在着每个地方都调用他们 切面术语 通知(advice):切面需要完成的工作 通知的类型(什么时间完成工作) ...

  8. 团购类网站倒计时的js实现

    一.如火如荼的团购网站 根据易观国际提供的统计数据,截至2010年6月,中国市场团购网站数量已经突破400家.国内团购潮从今年2月份开始出现,在4~6月出现高峰,尤其是今年5月,一些大的网站如爱帮网. ...

  9. linux批量解压和批量压缩

    ls *.tar.gz | xargs -n1 tar xzvf //批量解压 ls | awk '{ print "tar zcvf "$0".tar.gz " ...

  10. 出现二个奇葩bug

    1.js中少了个单引號,指定的href嵌套指定的地址.单双引號混合加入的情况下一点都不好找.让人头痛的是在chrome,ie11下没有出现js报错,在IE8下报html页面第一行出错.少了个;号 2. ...