精华内容

下载资源

问答

我要提问

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-repeat;

}

样式二：

body {

background:#2f373a;

font-family:Arial,Helvetica,sans-serif;font-size:100%;

line-height:1em;color:#4e4e4e;

min-width:920px;

border-top:10px solid #0c0e0e

}

样式三：

body {

font-family:Arial,Helvetica,sans-serif;

font-size:1em;

vertical-align:middle;

font-weight:normal

}

样式四：

body

{

margin:0px;

padding:0px;

background-color:#E7EAEB;

font-family:"微软雅黑","黑体","宋体";

font-size:12px;

height:36px;

}

样式五：

body

{

font: .8em Arial, Tahoma, Verdana;

background: #fff url(../images/bg.gif) repeat-x;

color: #777;

}

样式六：

body

{

width:auto; margin-top:12px;

float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:11px;

color:#999999;

line-height:25px;

letter-spacing:1px

}

样式七：

body

{

width:auto;

margin-left:1px;

float:left;

font-family:Arial, Helvetica, sans-serif;

font-size:13px;

color:#5f5f5f;

line-height:35px;

text-transform:uppercase

}

样式八：

body {

background: #e1e5e8;

font-family: "Georgia", Tahoma, Sans-Serif;

font-size: 12px;line-height: 18px;

color: #888;

}

样式九：

body

{

width:130px; height:20px;

background:url(images/servicesbg.gif) 0 0 repeat-x #68EF00;

color:#317400;

font:18px/14px Georgia, "Times New Roman", Times, serif;

margin:34px 0 0 37px;

}

样式十：

body

{

display:block;

width:94px;

height:20px;

background: url(images/serviceslink1bg.gif) 0 72% no-repeat #6DFD00;

color:#01699F;

font:13px/20px Georgia, "Times New Roman", Times, serif; text-decoration:none;

}

样式十一：

body {

margin: 0;

padding: 0;

line-height: 1.5em;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 12px;color: #33322e;background: #39443D url(images/templatemo_body_bg.jpg) repeat-x;

/* background: #47443c url(images/templatemo_body_bg_2.jpg) repeat-x; */

}

样式十二：

body {margin: 0;padding: 0;line-height: 1.5em;font-family: Tahoma, Geneva, sans-serif;font-size: 12px;color: #6f6f6f;

background: #2ac5c0 url(images/templatemo_body_top.jpg) repeat-x;

}

样式十三：

body {

margin: 0;

padding: 0;

line-height: 1.5em;

font-family: Verdana, Geneva, sans-serif;font-size: 11px;

color: #ffffff;background: #005b7f;

}

样式十四：

body {

margin: 0;

padding: 0;

line-height: 1.7em;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 12px;color: #333333;

background: #000000 url(images/templatemo_main_bg.jpg) repeat-y center;

}

样式十五：

body {

margin: 0;

padding: 0;

line-height: 1.7em;

font-family: Verdana, Geneva, sans-serif;

font-size: 12px;color: #707b84;

background: #3e464d;

}

样式十六：

body {

margin: 0;

padding: 0;

line-height: 1.7em;

letter-spacing: 1px;

font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;

color: #333;

background: #e1d1d6 url(images/templatemo_body.png) repeat-x top;

}

样式十七：

body {

margin: 0;

padding: 0;

line-height: 1.7em;

letter-spacing: 1px;

font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;

color: #333;

background: #e1d1d6 url(images/templatemo_body.png) repeat-x top;

}

样式十八：

body

{

background:url(images/bg.gif) repeat #000000;

padding:0; font-family:arial, sans-serif; font-size:12px;

margin:0px auto auto auto;

color:#36322b;

}

样式十九：

body

{

margin:0px;

padding:0px;

background:url(images/mainbg.gif) 0 0 repeat-x #F6F4E4;

color:#6B6854;

font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;

}

样式二十：

body

{

font-family:Georgia;

font-family:Arial;

}

更多相关内容
Css样式–字体样式和链接样式详解
2020-12-13 08:10:26

1.指定字体：font-family （1）实用通用字体系列：复制代码代码如下:body {font-family: sans-serif;} （2）制定字体系列：复制代码代码如下: h1 {font-family: Georgia, <span xss=removed>serif;} 在所有 ...

收起

纯Css比较好看的中英文字体样式（持续整理版）

万次阅读 2019-08-15 17:03:38

刚好公司要用到，需要纯css的，不用任何插件就可以显示很不错的字体样式一： <style type="text/css"> .tb-js-yf-style{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;} </style&...

刚好公司要用到，需要纯css的，不用任何插件就可以显示很不错的字体

样式一：

<style type="text/css">
.tb-js-yf-style{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
</style>

样式一：
<div class="tb-js-yf-style">京缘</div>
<div class="tb-js-yf-style">JY</div>

样式二：

<style type="text/css">
.tb-js-yf-style2{font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;}
</style>

样式二：
<div class="tb-js-yf-style2">京缘</div>
<div class="tb-js-yf-style2">JY</div>

样式三：

<style type="text/css">
.jia-style{font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;}
</style>

样式三：
<div class="jia-style">京缘</div>
<div class="jia-style">JY</div>

样式四：

<style type="text/css">
.ued-style{font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
</style>

样式四：
<div class="ued-style">京缘</div>
<div class="ued-style">JY</div>

样式五：

<style type="text/css">
.ux-style{font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;}
</style>

样式五：
<div class="ux-style">京缘</div>
<div class="ux-style">JY</div>

样式六：

<style type="text/css">
.ux-style2{font:12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
</style>


样式六：
<div class="ux-style2">京缘</div>
<div class="ux-style2">JY</div>

样式七：(主要是英文比较有特色)

<style type="text/css">
.geo-style{font:Georgia, serif;}
</style>

样式七：
<div class="geo-style">京缘</div>
<div class="geo-style">JY</div>

样式八：(主要是英文比较有特色)

<style type="text/css">
.geo-style2{font:italic 1em Georgia, serif;}
</style>

样式八：
<div class="geo-style2">京缘</div>
<div class="geo-style2">JY</div>

收起

展开全文

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——字体样式

常用：

font-family：字体
font-size：大小
font-weight：粗细
color：颜色

字体样式测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
        font-family:楷体; /*字体，可以设置多个*/
        color:blue;  /*颜色*/
        }
        h1{
        font-size:30px;  /*字体大小*/
        color:red;
        }
        .active{
        font-weight:bold;  /*粗体  用<strong></strong>标签也可以实现*/
        }
        .first{
        font:oblique bolder 36px "楷体";  /*斜体  粗体  大小  字体*/
        /*可以把设计字体样式的语句写在一起，这样更方便*/
        }


    </style>

</head>
<body>

<h1>故事介绍</h1>

<p class="active">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！
    魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。
    在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。
    魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。
    但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。
    很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。

</p>
<p class="first">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。
    村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。
    然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。
    受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。

</p>


</body>
</html>

效果图

在这里插入图片描述

收起

展开全文

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} ....

样式：
在这里插入图片描述
代码：

<html>
<head>
</head>
<style>
    body{
    	text-align: center;
    }
    .hcqFont{position:relative;letter-spacing:.07em;font-size:3em;font-weight:normal;margin:0 auto}
    .hcqFont:before,.hcqFont:after{position:absolute;top:0;left:0;right:0}
    .hcqStyle1{color:hsl(184,80%,25%);text-shadow:0 0 1px currentColor,/*highlight*/-1px -1px 1px hsl(184,80%,50%),0 -1px 1px hsl(184,80%,55%),1px -1px 1px hsl(184,80%,50%),/*light shadow*/1px 1px 1px hsl(184,80%,10%),0 1px 1px hsl(184,80%,10%),-1px 1px 1px hsl(184,80%,10%),/*outline*/-2px -2px 1px hsl(184,80%,15%),-1px -2px 1px hsl(184,80%,15%),0 -2px 1px hsl(184,80%,15%),1px -2px 1px hsl(184,80%,15%),2px -2px 1px hsl(184,80%,15%),2px -1px 1px hsl(184,80%,15%),2px 0 1px hsl(184,80%,15%),2px 1px 1px hsl(184,80%,15%),-2px 0 1px hsl(184,80%,15%),-2px -1px 1px hsl(184,80%,15%),-2px 1px 1px hsl(184,80%,15%),/*dark shadow*/2px 2px 2px hsl(184,80%,5%),1px 2px 2px hsl(184,80%,5%),0 2px 2px hsl(184,80%,5%),-1px 2px 2px hsl(184,80%,5%),-2px 2px 2px hsl(184,80%,5%)}
    .hcqStyle2{display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/}
    .hcqStyle3{background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow: 5px -5px black, 4px -4px white;font-weight: bold;-webkit-text-fill-color: transparent;-webkit-background-clip: text}
	.hcqStyle4{color: transparent;-webkit-text-stroke: 1px red;letter-spacing: 0.04em;}
	.hcqStyle5{color: transparent;background-color : blue;text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;-webkit-background-clip : text;}
	.hcqStyle6{color: gold;letter-spacing: 0;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135}
	.hcqStyle7{font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink}
	.text-reflect-base{color: palegreen;-webkit-box-reflect:below 10px;}
	.text{
	    width: 300px;
	    height: 200px;
	    position: absolute;
	    left: 50%;
	    margin-left: -150px;
	    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
	    -webkit-text-fill-color: transparent;
	    -webkit-background-clip: text;
	    -webkit-background-size: 200% 100%; 
	    -webkit-animation: masked-animation 4s linear infinite;
	    font-size: 35px;
	}
	@keyframes masked-animation {
	    0% {
	        background-position: 0  0;
	    }
	    100% {
	        background-position: -100%  0;
	    }
	}
</style>
<body>
    <h1 class='hcqFont hcqStyle1'>hcqFont hcqStyle1</h1>
    <h1 class='hcqFont hcqStyle2'>hcqFont hcqStyle2</h1>
    <h1 class="hcqStyle3">hcqStyle3</h1>
	<h1 class="hcqStyle4">hcqStyle4</h1>
	<h1 class="hcqStyle5">hcqStyle5</h1>
	<h1 class="hcqStyle6">hcqStyle6</h1>
	<h1 class="hcqStyle7">hcqStyle7</h1>
	<h1 class='text-reflect-base'>text-reflect-base</h1>
	<div class="text"><p>text</p></div>
</body>
</html>

收起

展开全文

css怎么改字体样式？
千次阅读 2021-06-29 08:44:51

CSS是一种定义样式结构如字体、颜色、位置等的语言，那么我们该如何使用css设置字体样式呢？下我们来看一下使用css改字体样式的方法。css改字体样式的方法：1、font-size指定字体大小，常用单位有em和px2、font-...

收起
CSS字体样式
千次阅读 2022-01-30 19:37:30

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

收起

html
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-06-21 14:10:43

1. CSS字体样式属性 1.1 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体...

收起
css3恐怖惊悚文字字体样式动画特效
2020-06-11 11:27:31

基于css3制作的一款恐怖惊悚文字字体样式动画特效，万圣节惊悚文字动画特效。

收起
CSS字体样式有哪些
2021-11-25 19:46:06

设置字体的大小 font-size 设置字体风格 font-variant 设置小型的大写字母字体 font-family 设置字体名 font-weight 设置字体的粗细字体大小font-size属性 font-size:绝对大小|相对大小...

收起

html
css怎么自定义字体样式
千次阅读 2020-11-12 19:26:49

css自定义字体样式的方法：可以利用font属性来自定义字体样式，如【font-weight:normal;】。font-weight属性用于设置文本的粗细，如果要设置文本字体大小，可以使用font-size属性。 font 简写属性在一个声明中设置...

收起
CSS中设置字体样式的5种常用属性—让字体设置再无难点
千次阅读 2022-04-11 14:53:22

设置字体样式的5中常用属性如下 1:color 设置字体颜色,也可以设置其他颜色 2:font-size 设置字体大小 (1)、设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际...

收起

javascript sqlite 开发语言 vscode java
css字体样式(Font Style) 属性
2020-09-25 05:00:30

主要为大家介绍下css下的字体样式，font的属性与写法，需要的朋友可以参考下

收起
css中文字体样式代码
千次阅读 2020-06-12 14:26:32

{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera 在css中使用英文表示法，以下附常见中文字体的英文名：

收起

html 网页设计
css怎么设置字体加粗样式
千次阅读 2021-08-04 04:22:09

css设置字体加粗样式的方法：首先创建一个HTML示例文件；然后在body中定义一些文字内容；最后通过“font-weight:bold;”或“font-weight:bolder;”属性设置字体加粗样式即可。本文操作环境：Windows7系统、Dell G3...

收起
css字体样式属性有哪些
千次阅读 2021-08-04 07:04:04

css字体样式属性有：1、color是字体颜色；2、【font-size】字号大小；3、【font-family】字体；4、【font-weight】字体粗细；5、【font-style】字体风格。本教程操作环境：windows7系统、css3版，DELL G3电脑。css...

收起
css字体样式属性有哪些？
2021-07-04 08:07:39

css字体样式属性有：1、font-size：字号大小。2、font-family：规定元素的字体系列。3、font-weight：字体粗细。4、font-style：字体风格。5、font：综合设置字体样式。.css字体属性说明：1、font-size:字号大小font...

收起
css文本样式（一）：css字体样式
千次阅读 2021-05-05 17:57:51

css字体样式 文字样式属性: 字体：font-family 文字大小：font-size 文字颜色：font-color 文字粗细：font-weight 文字样式：font-style font-family字体属性：定义元素内文字以什么字体来显示。语法：font-...

收起
html网页什么样的字体最好看，css设置各种中文字体样式代码
万次阅读 多人点赞 2017-08-13 14:30:58

css代码如下: { font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera 在css中使用英文表示法，以下附...网页字体样式华文宋体：ST

收起

html
微信小程序css篇----字体(Font)
2021-03-29 21:14:58

1.font-style：文字样式。取值：normal 正常的字体， italic 斜体字， oblique 倾斜的字体。 (此图片来源于网络，如有侵权，请联系删除! ) 2.font-weight：设置文本字体的粗细。取值范围为100-900.

收起
css字体样式属性大全（内附实例）
千次阅读 2020-07-31 00:08:53

综合设置字体样式 font-size：字号大小 font-size 属性用于设置字体字号，该属性的值可以使用相对长度单位，也可以使用绝对单位长度，其中，相对单位比较常用，推荐使用像素单位px，绝对单位使用较少可选参数值...

收起
手机端应用的CSS字体样式规范
千次阅读 2019-06-26 11:24:38

本人主要是前后端开发，设计不是很在行，在没有设计师的情况下，调字体样式真的很苦恼。这里整理一下自己通用的字体大小和颜色，方便后续直接使用。这里是借鉴了微信小程序的视觉规范，主要是用于手机端H5应用、像...

收起

手机端
前端CSS3--字体样式
千次阅读 2020-08-29 21:10:01

一、font-family设置字体 sans-serif是专指西文中没有衬线的字体例如：为网页中的文字设置字体为"宋体"。 <style type="text/css"> body{ font-family:"宋体",sans-serif; } 或 body{font-family:"Microsoft ...

收起

1 2 3 4 5 ... 20

收藏数 156,813

精华内容 62,725

热门标签

关键字：

Css样式–字体样式和链接样式详解

纯Css比较好看的中英文字体样式（持续整理版）

CSS——CSS常用的字体样式

CSS——字体样式

9款漂亮的纯css字体样式

css怎么改字体样式？

CSS字体样式

CSS字体样式调整详解

7款漂亮的纯css字体样式

CSS字体样式篇

css3恐怖惊悚文字字体样式动画特效

CSS字体样式有哪些

css怎么自定义字体样式

CSS中设置字体样式的5种常用属性—让字体设置再无难点

css字体样式(Font Style) 属性

css中文字体样式代码

css怎么设置字体加粗样式

css字体样式属性有哪些

css字体样式属性有哪些？

css文本样式（一）：css字体样式

html网页什么样的字体最好看，css设置各种中文字体样式代码

微信小程序css篇----字体(Font)

css字体样式属性大全（内附实例）

手机端应用的CSS字体样式规范

前端CSS3--字体样式

css比较好看的字体样式