精华内容
下载资源
问答
  • css设置好看的字体样式
    千次阅读
    2022-04-11 14:53:22

    设置字体样式的5中常用属性如下

    1:color 设置字体颜色,也可以设置其他颜色

    2:font-size 设置字体大小

            (1)、设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的

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

    一般情况下文字都要比这个格要小一些,也有时会比格大,

    根据字体的不同,显示效果也不能

            (2)、设置文字的大小,浏览器中一般默认的文字大小都是16px,默认的最小的字体是12px

            (3)、常用的单位 px,rem,em

    3:font-family可以指定文字的字体

            当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体,该样式可以同时指定多个字体,多个字体之间使用‘,’分开,当采用多个字体时,浏览器会优先使用前边的字体,如果前边没有在尝试下一个, 浏览器使用的字体默认就是计算机中的字体, 如果计算机中有,则使用,如果没有就不用,在开发中,如果字体太奇怪,用的太少了,尽量不要使用, 有可能用户的电脑没有,就不能达到想要的效果。

            在网页中将字体分成5大类:

    serif ['serif](衬线字体)sans-serif(非衬线字体)monospace (等宽字体)cursive ['kə:siv](草书字体)fantasy ['fæntəsi](虚幻字体)

    可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式,一般会将字体的大分类,指定为font-family中的最后一个字体 ,用来兜底

    4:font-style可以用来设置文字的斜体

             - 可选值:

                     normal,默认值,文字正常显示        

                     italic [i'tælik] 文字会以斜体显示

                    oblique [ə'bli:k]文字会以倾斜的效果显示

             - 大部分浏览器都不会对倾斜和斜体做区分,

                          也就是说我们设置italic和oblique它们的效果往往是一样的

             一般我们只会使用italic

    5:font-weight可以用来设置文本的加粗效果:

                 可选值:

                     normal,默认值,文字正常显示

                     bold,文字加粗显示

                    100-900之间的9个值,

                            但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果

    也就是200有可能比100粗,300有可能比200粗,但是也可能是一样的

    6:font-variant ['vεəriənt] 可以用来设置小型大写字母

           可选值:

                    normal,默认值,文字正常显示

                    small-caps 文本以小型大写字母显示

                            小型大写字母:将所有的字母都以大写形式显示,但是小写字母的大写, 要比大写字母的大小小一些。

    在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开,使用font设置字体样式时,斜体 加粗 小大字母,没有顺序要求,甚至可写可不写,

    如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式,大小必须是倒数第二个样式

    实际上使用简写属性也会有一个比较好的性能

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			
    			.p1{
    				color: red;
    				font-size: 30px;
    				font-family: "微软雅黑";
    				font-style: italic;
    				font-weight: bold;
    				font-variant: small-caps ;
    			}
    			
    			.p2{
    				color: red;
    				/*设置一个文字大小*/
    				font-size: 50px;
    				/*设置一个字体*/
    				font-family: 华文彩云;
    				/*设置文字斜体*/
    				font-style: italic;
    				/*设置文字的加粗*/
    				font-weight: bold;
    				/*设置一个小型大写字母*/
    				font-variant: small-caps;
    			}
    			
    			.p3{
    				/* font: small-caps bold italic 60px "微软雅黑"; */
    				font: 60px "微软雅黑";
    
    			}
    			
    			
    		</style>
    	</head>
    	<body>
    		
    		<p class="p3">我是一段文字我是一段文字我是一段文字,ABCDEFGabcdefg</p>
    		
    		<p class="p1">我是一段文字,ABCDEFGabcdefg</p>
    		
    		<p class="p2">我是一段文字,ABCDEFGabcdefg</p>
    	</body>
    </html>
    

    更多相关内容
  • CSS设置字体样式

    2021-12-18 22:18:18
    当需要设置英文字体时,英文字体必须位于中文字体名之前。 字体大小属性font-size font-size:字号大小 格式: font-size: 12px; 字体风格属性font-style font-syle属性: normal:正常(默认值) italc:斜体

    字体类型属性font-family

    格式:

    font-family:"华文彩云"

    使用font-family设置字体时,需要注意以下几点:

    • 各种字体之间必须使用英文状态下的逗号隔开
    • 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体必须位于中文字体名之前。

    字体大小属性font-size

    font-size:字号大小

    格式:

    font-size: 12px;

    字体风格属性font-style

    font-syle属性:

    normal:正常(默认值)

    italc:斜体

    属性值:normal:默认值 italc:斜体 oblique:倾斜

    font-style: mormal;

    注意是:italc和oblique都是设置斜体的,两者在本质上没有效果上并没有区别,但是在实际开发中常用是italc

    字体粗细属性font-weight

    normal:正常(默认值)

    bold:敢于冒险的; 鲁莽的; 轮廓(或色彩)突出的;

    bolder:粗体的; 勇敢的; 冒失的;

    lighter:更细;打火机; 点火器; 点火者; 驳船;

    格式:

    font-weight: bold;

    n属性值描述
    normal默认值,定义标准的字符
    bold定义粗体字符
    bolder定义更粗的字符
    lighter定义更细的字符
    100~900(100)的整数倍定义由细到粗的字符,其中400是等于normal,700等于bold,值越大越粗

    字体颜色属性Color

    格式:

    color: red;

    字体属性font

    字体属性font

    font综合设置字体样式:风细大体

    font: font-style font-weight font-size/line-height font-family;

    综合写法:一定要写font-sizefont-family属性,其它属性可以不写。

    在这里插入图片描述

    展开全文
  • css怎么改字体样式

    千次阅读 2021-06-29 08:44:51
    CSS是一种定义样式结构如字体、颜色、位置等的语言,那么我们该如何使用css设置字体样式呢?下我们来看一下使用css字体样式的方法。css字体样式的方法:1、font-size指定字体大小,常用单位有em和px2、font-...

    CSS是一种定义样式结构如字体、颜色、位置等的语言,那么我们该如何使用css设置字体样式呢?下我们来看一下使用css改字体样式的方法。

    1bb1cd497c3bb6962d6cf2b951dd0727.png

    css改字体样式的方法:

    1、font-size

    指定字体大小,常用单位有em和px

    2、font-family

    指定使用的字体常用的中文字体有微软雅黑和宋体,英文字体有Arial

    可以同时指定多个字体,使用英文的逗号分隔,浏览器会按顺序查找,找不到就找下一个,全部没找到就使用系统默认的

    字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用引号

    CSS字体常用技巧:现在网页字体大小普遍使用14px+

    尽量使用 偶数 数字字号,因为在有些老式浏览器中使用奇数字号的字体会有bug

    尽量使用 系统默认字体,保证用户在任何浏览器中都可以正常显示

    3、font-weight

    字体粗细(bold相等于设置该属性的值为700,normal相等于设置该属性值为400–>不用单位,建议使用数字因为解析会更快)

    4、font-style

    normal(一般用于让斜体不倾斜,em标签有加重强调的语义 但是字体会倾斜,可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果)

    字体样式可以连写,即所有的字体样式 使用一个语句,但是有一定的语法规则和顺序。选择器 { font : font-style font-weight font-size/line-height font-family; }

    字体样式连写时需要注意:一定要按顺序写,可以有省略不写的样式但是一定要按顺序,而且font-size和font-family是不可以省略的,否则会不起作用

    展开全文
  • CSS字体样式

    千次阅读 2022-01-30 19:37:30
    CSS字体样式字体样式属性一、字体类型1.设置一种字体2.设置多种字体二、字体大小三、字体粗细四、字体风格五、字体颜色1、关键字2、16进制RGB值 字体样式属性 一、字体类型 font-family可以指定多种字体。使用多个...

    字体样式属性

    在这里插入图片描述

    一、字体类型

    font-family可以指定多种字体。使用多个字体时,将按从左到右的顺序排列,并且以英文逗号‘,’ 隔开。

    1.设置一种字体

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体类型</title>
        <style>
            .div1{font-family: Arial;}
            .div2{font-family: 'Times New Roman';}
            .div3{font-family: '微软雅黑';}
        </style>
    </head>
    <body>
        <div class="div1">Arial</div>
        <div class="div2">Times New Roman</div>
        <div class="div3">微软雅黑</div>
    </body>
    </html>
    

    在这里插入图片描述
    对于font-family属性,如果字体类型只有一个英文单词,则不需要加上双引号;如果字体类型是多个英文单词或者是中文,则需要加上双引号。

    2.设置多种字体

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Document</title>
        <style>
            p{font-family: Arial, Verdana, Georgia;}
        </style>
    </head>
    <body>
        <p>CSDN博客网</p>
    </body>
    </html>
    

    分析:p{font-family:Arial,Verdana,Georgia;}这一句的意思是:p元素优先使用Aria字体来显示,如果你的电脑没有装Arial字体,那就接着考虑Verdana字体。如果你的电脑还是没有装Verdana字体,那就接着考虑Georgia字体……以此类推。如果Arial、Verdana、Georgia这三种字体都没有安装,那么p元素就会以默认字体(即宋体)来显示。

    二、字体大小

    font-size属性取值有两种,一种是“关键字”,如small、medium、large等。另外一种是“像素值”,如 10px、16px、21px等。在实际开发中,关键字这种方式基本不会用。

    三、字体粗细

    字体粗细(font-weight)跟字体大小(font-size)是不一样的。粗细指的是字体的“肥瘦”,而大小指的是字体的“宽高”。font-weight属性取值有两种:一种是100~900的“数值”;另外一种是“关键字”。
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体粗细</title>
        <style>
            .one{font-weight: 400;}
            .two{font-weight: 700;}
            .tree{font-weight: bold;}
        </style>
    </head>
    <body>
        <div class="one">CSDN博客网</div>
        <div class="two">CSDN博客网</div>
        <div class="tree">CSDN博客网</div>
    </body>
    </html>
    

    在这里插入图片描述

    四、字体风格

    使用font-style属性来定义斜体效果。font-style属性取值如下所示:
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体样式</title>
        <style>
            .one{font-style: oblique;}
            .two{font-style: italic;}
            .tree{font-style: normal;}
        </style>
    </head>
    <body>
        <div class="one">CSDN博客网</div>
        <div class="two">CSDN博客网</div>
        <div class="tree">CSDN博客网</div>
    </body>
    </html>
    

    在这里插入图片描述
    上述代码中,font-style属性值为italic或oblique时,页面效果是一样的。这两者还是有区别的:有些字体有斜体italic属性,但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。

    五、字体颜色

    color属性取值有几种:比如“关键字”,“16 进制RGB值”。除了这两种,其实还有RGBA、HSL等。

    1、关键字

    关键字,指的就是颜色的英文名称,如red、blue、green等。

    2、16进制RGB值

    单纯靠“关键字”,满足不了实际开发需求,因此我们还引入了“16进制RGB值”。所谓的16进制RGB值,指的是类似#FBF9D0形式的值。
    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>字体样式</title>
        <style>
            .one{color: aqua;}
            .two{color: #f5e90c;}
        </style>
    </head>
    <body>
        <div class="one">CSDN博客网</div>
        <div class="two">CSDN博客网</div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 9款漂亮的纯css字体样式

    千次阅读 2021-02-04 23:20:16
    样式: 代码: <html> <head> </head> <style> body{ text-align: center; } .hcqFont{position:relative;letter-spacing:.07em;font-size:3em;font-weight:normal;margin:0 auto} ....
  • CSS——CSS常用的字体样式

    千次阅读 2020-11-08 19:54:56
    CSS——字体样式 常用: font-family:字体 font-size:大小 font-weight:粗细 color:颜色 字体样式测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
  • 二十款漂亮的CSS字体样式

    千次阅读 2021-08-04 07:44:54
    样式一:body {margin: 0;padding: 0;line-height: 1.5em;font-family: "Times New Roman", Times, serif;font-size: 14px;color: #000000;background: #f2e7ca url(images/templatemo_body.jpg) top center no-...
  • 刚好公司要用到,需要纯css的,不用任何插件就可以显示很不错的字体 样式一: <style type="text/css"> .tb-js-yf-style{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;} </style&...
  • css怎么设置字体加粗样式

    千次阅读 2021-08-04 04:22:09
    css设置字体加粗样式的方法:首先创建一个HTML示例文件;然后在body中定义一些文字内容;最后通过“font-weight:bold;”或“font-weight:bolder;”属性设置字体加粗样式即可。本文操作环境:Windows7系统、Dell G3...
  • 字体样式和链接样式是css样式中的一部分,在本文将为大家详细介绍下,希望对大家有所帮助
  • CSS字体样式调整详解

    千次阅读 2022-01-29 19:20:49
    大家好,今天分享一下CSS字体样式调整 我们对文本样式做以下的调整 1.颜色 2.文本对齐的方式 3.首行缩进 4.行高 5.装饰 写HTMl代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset...
  • 7款漂亮的纯css字体样式

    千次阅读 2020-11-10 10:57:04
    转载于:https://blog.csdn.net/aa19891204/article/details/81021591 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...h1 class="vintage1">
  • css怎么自定义字体样式

    千次阅读 2020-11-12 19:26:49
    css自定义字体样式的方法:可以利用font属性来自定义字体样式,如【font-weight:normal;】。font-weight属性用于设置文本的粗细,如果要设置文本字体大小,可以使用font-size属性。 font 简写属性在一个声明中设置...
  • CSS字体样式有哪些

    2021-11-25 19:46:06
    设置字体的大小 font-size 设置字体风格 font-variant 设置小型的大写字母字体 font-family 设置字体名 font-weight 设置字体的粗细 字体大小font-size属性 font-size:绝对大小|相对大小...
  • CSS设置字体 DIV内文字字体样式如何设置,怎么设置对象内文字字体样式,比如黑体、宋体、微软雅黑、英文字体等字体如何设置css可以通过font-family属性来设置字体样式,font-family 可以把多个字体名称作为一个...
  • 需要更改字体和居中显示css字体样式有哪些非常多,可以设置系统中的任何一种字体样式,Windows自带中文字体:宋体、黑体、楷体(GB2312)、仿宋(GB2312)、微软雅黑等。 Windows自带英文字体:Arial、Verdana、 Geneva...
  • css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小属性样式和对div加class设置外部CSS字体大小样式,让...
  • CSS字体样式

    千次阅读 多人点赞 2020-06-21 14:10:43
    1. CSS字体样式属性 1.1 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体...
  • css代码如下: { font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera 在css中使用英文表示法,以下附...网页字体样式华文宋体:ST
  • CSS字体样式设置、CSS文本样式设置

    千次阅读 2019-10-22 18:23:54
    一、CSS字体样式设置 1.字体样式设置 字体样式大致有如下几种特征: 字体类型(风格)、字体粗细、字体大小、字体系列 (1)字体类型(风格) font-style 用于设置字体风格,可设置以下值: ① normal:普通字体 ② ...
  • css样式中怎么设置字体大小

    万次阅读 2021-08-05 04:39:18
    css样式中,可以利用“font-size”属性来设置字体大小,只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小,实际上设置的是字体中字符框的高度,其实际字符字形可能比框高或矮(通常会...
  • css设置字体样式

    千次阅读 2018-10-31 19:32:40
    字体类型设置 依赖于 当前操作系统中 已安装的字体 库, 如果 所设置字体类型 在 系统中能 查到, 则 启用该字体 如果 所设置字体 类型 在 系统中 找不到, 则 使用默认字体 字体类型名称 如果 包含空格 , 字体...
  • CSS文字样式

    千次阅读 2022-01-30 21:10:46
    CSS文字样式,color,font-size,cursor:pointer;a{text-decoration:line-through;}a{text-decoration:overline;}underlinecolor:red;font-size:30px;font-weight:bold;font-weight:bold;font-family:"楷体";font-...
  • css如何设置body字体颜色

    千次阅读 2021-08-04 05:17:33
    css可以使用color属性设置body字体颜色,只需要给body元素设置“color:颜色值”样式即可。color 属性规定文本的颜色。该属性设置了一个元素的前景色,这个颜色还会应用到元素的所有边框,除非被其他边框颜色属性...
  • CSS - 设置placeholder样式

    千次阅读 2021-09-01 14:54:35
    1.第一种最简单的写法:在谷歌浏览器中使用 textarea::placeholder { font-size... 字体颜色为红色"> input[type='password']::-webkit-input-placeholder{ /* 使用webkit内核的浏览器*/ color: #E97F81; } 本文参考
  • css中文字体样式代码

    千次阅读 2020-06-12 14:26:32
    { font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera 在css中使用英文表示法,以下附常见中文字体的英文名:
  • 前端CSS3--字体样式

    千次阅读 2020-08-29 21:10:01
    一、font-family设置字体 sans-serif是专指西文中没有衬线的字体 例如:为网页中的文字设置字体为"宋体"。 <style type="text/css"> body{ font-family:"宋体",sans-serif; } 或 body{font-family:"Microsoft ...
  • CSS设置字体样式

    万次阅读 2018-02-01 15:35:32
    CSS设置字体样式:  1.字体大小设置  字体大小设置,常见的有四种不同的方法: body{ font-size:14px; } h1{ font-size:150%; } h2{ font-size:1.2em; } h3{ font-size:small; } body中的大小设置14px,表示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 156,818
精华内容 62,727
关键字:

css设置好看的字体样式