HTML&CSS基础-字体的样式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>字体的样式</title>

        <style>

            .hello{

                /**

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

                 */

                color: red;

                /**

                 *     设置文字的大小，浏览器中一般默认的文字大小都是16px

                 *         font-size设置的并不是文字本身的大小

                 *         在页面中，每个文字都是处在一个看不见的框中的

                 *         我们设置的font-size实际上是设置格的高度，并不是字体的大小

                 *         一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同。

                 */

                font-size: 30px;

                /**

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

                 *         当采用某种字体时，如果浏览器支持该字体则使用，如果浏览器对该字体不支持，则使用默认字体

                 *         该样式可以同时指定多个字体，多个字体之间使用，分开当采用多个字体时，浏览器会优先使用前边的字体，如果前面的字体没有，则尝试依次匹配下一个字体，若一个都匹配不上则使用默认字体。

                 *         浏览器使用的字体默认就是计算机中的字体，如果计算机中有则使用，若没有就不用。windows操作系统默认存放系统路径在:"C:\Windows\Fonts"

                 *         在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户电脑没有(比如windos中的"curlz mt","微软雅黑"等字体,在linux操作系统不一样有哟~)，就不能达到想要的效果。

                 */

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

            }

        </style>

    </head>

    <body>

        <p class="hello">我是一个P标签,12345,上上打老虎,abcdefg</p>

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-字体的样式的更多相关文章

  1. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  2. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  3. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  4. CSS font-size字体大小样式属性

    设置字体大小CSS单词与语法 基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:fon ...

  5. CSS基础-字体

    字体变化设置 改变字体颜色 color 改变字体大小 font-size 改变字体粗细 font-weight 改变字体样式 font-family 改变字间距 letter-spacing 改变字体 ...

  6. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

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

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

  9. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

随机推荐

  1. iOS - 点击UIButton不变灰,button的image不变灰

    要想让uibutton点击不变灰 初始化的时候就不能 UIButton *button = [[UIButton alloc]init]; 初始化的时候酱紫,可以保证button点击时不变灰 UIBu ...

  2. 在使用redis做缓存后，mybatis的延迟加载失效

    原来使用的是EHcache,mybatis延迟加载没有问题,改成redis后,延迟加载获得数据时就会发生错误. 报:Cannot get Configuration as configuration ...

  3. Linux开机报错，提示根目录有错误，无法通过检测进入系统

    报错信息如下: VolGroup-lv_root contains a file system with errors, check forced. 修复方法:(因为我的是虚拟机,可以随意做备份,所以 ...

  4. Kubernetes 监控方案之 Prometheus Operator(十九)

    目录 一.Prometheus 介绍 1.1.Prometheus 架构 1.2.Prometheus Operator 架构 二.Helm 安装部署 2.1.Helm 客户端安装 2.2.Tille ...

  5. 有些新电脑采用“UEFI”作为固件。由于UEFI不支持DOS，所以在UEFI环境下安装的WIN10等系统也就无法使用基于DOS的一键GHOST

    有些新电脑采用“UEFI”作为固件.由于UEFI不支持DOS,所以在UEFI环境下安装的WIN10等系统也就无法使用基于DOS的一键GHOST

  6. C++全排列 next_permutation

    全排列函数  next_permutation 这是C++的STL中专门用来排列的函数(可以自动处理存在重复数据集的排列问题) 使用时要加上头文件 #include <algorithm> ...

  7. LeetCode 235. 二叉搜索树的最近公共祖先 32

    235. 二叉搜索树的最近公共祖先 235. Lowest Common Ancestor of a Binary Search Tree 题目描述 给定一个二叉搜索树,找到该树中两个指定节点的最近公 ...

  8. python模块知识三 hashlib 加密模块、collections、re模块

    8.hashlib 加密模块 ​ 主要用于加密和校验 常见密文:md5,sha1,sha256,sha512 只要明文相同,密文就相同 只要明文不相同,密文就是不相同的 不能反逆(不能解密)--md5 ...

  9. 【转】SpringBoot处理url中的参数的注解

    1.介绍几种如何处理url中的参数的注解 @PathVaribale  获取url中的数据 @RequestParam  获取请求参数的值 @GetMapping  组合注解,是 @RequestMa ...

  10. vue刷新页面出现闪烁

    在容器里添加v-cloak <div class="box" id="call-no-list" v-cloak></div> 然后在c ...