首页 > 其他分享 >css字体

css字体

时间:2024-10-04 14:12:46浏览次数:7  
标签:文本 family text credits 字体 font css

1.字体分类
SERIF:衬线字体。在字母的主要笔画末端有额外装饰。适合长篇文本
SANS_SERIF无衬线字体。文本小的时候运用
MONOSPACE等宽字体。每个字母宽度相同。用于显示代码
CURSIVE:草书字体
FANTASY虚幻字体,用于标题。不适合长篇文本
2.字体选用font-family
<style type="text/css">
			body {
				font-family: Georgia, Times, serif;}
			h1, h2 {
				font-family: Arial, Verdana, sans-serif;}
			.credits {
				font-family: "Courier New", Courier, monospace;}
		</style>
3.字体大小font-size
	<style type="text/css">
			body {
				font-family: Arial, Verdana, sans-serif;
				font-size: 12px;}
			h1 {
				font-size: 200%;}
			h2 {
				font-size: 1.3em;}
		</style>

像素,百分数,em。
4.用font-face下载字体
<style type="text/css">
			@font-face {
				font-family: 'ChunkFiveRegular';
				src: url('fonts/chunkfive.eot');}
			h1, h2 {
				font-family: ChunkFiveRegular, Georgia, serif;}
		</style>
5.粗体
<style type="text/css">
			.credits {
				font-weight: bold;}
		</style>

normal普通粗细。bold粗体
6.斜体
<style type="text/css">
			.credits {
				font-style: italic;}
		</style>
oblique或italic
7.大小写
h1 {
				text-transform: uppercase;}
			h2 {
				text-transform: lowercase;}
			.credits {
				text-transform: capitalize;}
uppercase大写,lowercase小写,capitalize首字母大写

8.下划线或删除线
.credits {
				text-decoration: underline;}
			a {
				text-decoration: none;}
none,无装饰线
underline文本下方添加实线
overline文本上方添加实线
line-through穿过文本
blink文本闪烁

标签:文本,family,text,credits,字体,font,css
From: https://www.cnblogs.com/zhongta/p/18446570

相关文章

  • CSS元素可见性
    CSS中的visibility属性用来设置元素是否可见,您可以将该属性与JavaScript一起使用,来创建非常复杂的菜单或网页布局,比如在网页中做一些测试题时您可以使用visibility属性将题目的答案或解析隐藏起来,需要时再将其展示出来。visibility属性的可选值如下:值描述visible......
  • 22.响应式网络推广建站公司网页 Web前端网页制作 大学生期末大作业 html+css+js
     目录 一、前言 二、网页文件 三、网页效果四、代码展示1.HTML2.CSS3.JS 五、更多推荐一、前言 本实例应用html+css+js,响应式布局,可以根据不同的设备屏幕大小自动调整页面布局,手机等移动设备自适应界面,提高用户体验;支持包括IE、Firefox、Chrome、Safari等主......
  • CSS display: flex布局
    CSSdisplay:flex布局来源https://zhuanlan.zhihu.com/p/646436119前言早期CSS布局依赖display属性+position属性+float属性。它对特殊的布局非常不方便,如,垂直居中。于是,W3C在2009年提出了一种新的方案——Flex方案,可以简便、完整、响应式地实现各种页面布局。目前,它已......
  • CSS display属性 inline-block flex grid
    CSSdisplayinline-block flexgrid=======================================CSS的display属性是一个核心属性,用于控制元素如何在页面布局中显示,包括其盒模型的行为。以下是display属性的一些常见值及其示例代码:1.block   说明:将元素变为块级元素,独占一行,可以设置宽高、......
  • CSS3--美若天仙!?
    免责声明:本文仅做分享~ 目录CSS引入方式 选择器盒子尺寸和背景色文字控制属性单行文字垂直居中字体族font复合属性文本对齐方式文本修饰线color文字颜色-----复合选择器伪类选择器超链接伪类CSS特性继承性层叠性优先级Emmet写法背景属性背景图......
  • css颜色
    1.前景色<styletype="text/css"> body{ padding:20px; font-family:Arial,Verdana,sans-serif;} /*colorname*/ h1{ color:DarkCyan;} /*hexcode*/ h2{ color:#ee3e80;} /*rgbvalue*/ p{ color......
  • CSS精灵图
    当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。然而,一个网页中往往包含大量的图像资源(例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等),这就会导致浏览器频繁的请求服务器,大大降低网页的......
  • Visual Studio 字体与主题推荐
    个人推荐,仅供参考:主题:OneMonokaiVSTheme链接:OneMonokaiVSTheme-VisualStudioMarketplacehttps://marketplace.visualstudio.com/items?itemName=azemoh.onemonokai效果:字体:JetBrainsMono链接:NerdFonts-Iconicfontaggregator,glyphs/iconscollection,&......
  • CSS弹性盒子(display:flex)使用技巧
    1.弹性盒模型简介FlexibleBox(伸缩盒模型,又称:弹性盒子)是W3C在2009年提出的一种新的盒子模型。通过display:flex;可以开启伸缩盒模型,将元素设置为伸缩容器,可以轻松的对元素进行布局。2.主轴与侧轴开启display:flex;的元素内的子元素会沿着主轴排列,主轴默认水平方向,......
  • 第四章 CSS样式基础
    目录4.1CSS概述4.1.1.CSS的基本概念4.1.2传统HTML的缺点4.1.2.1.维护困难4.1.2.2.标记不足4.1.2.3.网页过“胖”4.1.2.4.定位困难4.1.3.CSS的特点和优势4.1.3.1.表现和内容分离4.1.3.2.增强了网页的表现力4.1.3.3.使整个网站显示风格趋于统一4.1.4.CSS的编写规则......