设置字体颜色,使用color来设置文字的颜色

设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不能。

通过font-family可以指定文字的字体

当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体。
该样式可以同时指定多个字体，多个字体之间使用“,”分开。
当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个。

浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用。
在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果。

示例demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p{

                color: red;

                font-family: 华文彩云 , arial , 微软雅黑;;

            }

        </style>

    </head>

    <body>

        <p>

            日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！

        </p>

    </body>

</html>

效果：

前端学习 -- Css -- 字体的更多相关文章

  1. 前端学习 -- Css -- 字体的几个属性学习

    font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...

  2. 前端学习 -- Css -- 字体分类

    在网页中将字体分成5大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这 ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. 2020年12月-第02阶段-前端基础-CSS字体样式

    CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...

  5. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  7. 前端学习_04_font-awesome字体图标

    使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页 ...

  8. 前端学习 -- Css -- 行间距

    在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线 ...

  9. 前端学习 -- Css -- 伪类

    伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...

随机推荐

  1. Mac 如何显示隐藏文件夹并设置快捷键

    通过在终端运行命令可以控制隐藏文件是否显示: 输入defaults write com.apple.finder AppleShowAllFiles NO 就不显示, 输入defaults write ...

  2. 2017-2018 Exp4 恶意代码分析 20155214曾士轩

    目录 Exp4 恶意代码分析 实验内容 使用schtasks指令监控系统运行 主要思路 知识点 启发 Exp4 恶意代码分析 本次实验操使用Windows下的schtasks,sysmon,Proce ...

  3. 20155239吕宇轩《网络对抗》Exp3 免杀原理与实践

    20155239吕宇轩<网络对抗>Exp3 免杀原理与实践 实验过程 Kali使用上次实验msfvenom产生后门的可执行文件,上传到老师提供的网址http://www.virscan.o ...

  4. Python 语言简介

    Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaScript语言等等. 那P ...

  5. 外部事件/中断的区别及EXTI->SWIER的用途

    EXTI_SWIER作用:允许我们通过程序控制就可以启动中断/事件线 1.产生事件的线路最终的产物是一个脉冲信号,这个脉冲信号可以给其他外设电路使用,比如定时器TIM.模拟数字转换器ADC等等. 2. ...

  6. 【干货】YUM安装PHP 7版本后，增加phalcon框架的报错解决

    目录 1.yum安装php 7.x版本,此处部署7.3版本 2.安装phalcon框架 2.1.PHP版本依赖关系 2.2.编译phalcon扩展模块 2.3.增加扩展文件 3.部署phalcon遇到 ...

  7. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  8. PowerBI开发 第三篇：报表设计技巧

    最近做了几个PowerBI报表,对PowerBI的设计有了更深的理解,对数据的塑形(sharp data),不仅可以在Data Source中实现,例如在TSQL查询脚本中,而且可以在PowerBI中 ...

  9. 使用node-webkit(v0.35.5)和innosetup(3.6.1)打包将web程序打包为桌面客户端(安装包)

    这边主要是有一个客户,需要在电视机上安装一个客户端,含有视频直播功能:刚开始我们采用的webapp打包成apk安装在电视机上,发现摄像头监控画面根本无法播放(apk在手机上可以正常播放视频):排除一些 ...

  10. LeetCode 633. Sum of Square Numbers平方数之和 (C++)

    题目: Given a non-negative integer c, your task is to decide whether there're two integers a and b suc ...