字体

color 前景色,用来设置字体的颜色
font-size 字体大小
font-family 字体族,指定字体的类别,浏览器自动使用该类别下的字体;可以同时指定多个字体,多个字体间用逗号隔开,前一个无法使用就用后一个;字体能否使用由用户计算机里是否安装该字体决定。

  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace 等宽字体
  • cursive 草书字体
  • fantasy 虚幻字体

可以让用户使用服务器中的字体,但是加载速度较慢,会受到网速影响;而且容易出现版权问题:

/* 让用户可以使用服务器中的字体 */
@font-face{
    /* 指定字体的名字,自己起名*/
    font-family: '名字';
    /* 服务器中字体的路径 */
    src: url('路径');
}
图标字体 iconfont

在网页中经常需要使用一些小图标,可以通过图片来引入图标,但是图片本身比较大,并且非常不灵活;
字体是矢量图,不会失真;
java网页中设置的默认字体 javaweb字体_图标字体

可以从font awesome里找找能用的图标字体,从英文版找,比较新。

  • 把下载并解压好的fontawesome-free-6.1.1-web下面的css和webfonts两个文件夹移动到项目中;
  • 将all.css 或者 all.main.css 引入到网页中 < link rel=“stylesheet” href=“./css/all.css” >
  • 使用方法
  • 直接通过类名使用图标字体:class=“fas 想用的类名” 或者 class=“fab 想用的类名”,基本fas和fab已经够用了,只有这两个是免费的;
  • 通过伪元素设置图标字体;
  • 通过实体使用图标字体&#图标编码
伪元素:
 - 找到要设置图标的元素,通过 before 或者 after 选中;
 - 在 content 中设置字体的编码;
 - 设置字体的样式。
*{
    margin: 0px;
    padding: 0px;
}
.abstract{
    width: 98%;
    margin: 10px auto;
    background-color: rgb(252, 227, 248);
}
p{
    color: palevioletred;
    font-size: 18px;
    /* 此时 1em=18px */
    font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}
p::before{
    content: '\f0f4';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:rgb(165, 90, 235);
    margin-right: 5px;
}
<html lang="en">
    <head>
        <meta charset="UTF-8">
		<meta name="keywords" content="kirlant">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>learn</title>
		<link rel="shortcut icon" href="../imgs/kirlant_logo.jpg" />
        <link rel="stylesheet" href="learn.css" />
        <link rel="stylesheet" href="./css/all.css">
    </head>
    <body>
        <div class="abstract">
            <p>Point cloud segmentation is fundamental in understanding 3D environments.</p> 
            <p>However, current 3D point cloud segmentation methods usually perform poorly on scene boundaries, which degenerates the overall segmentation performance.</p> 
            <p>In this paper, we focus on the segmentation of scene boundaries.</p> 
            <p>Accordingly, we first explore metrics to evaluate the segmentation performance on scene boundaries.</p> 
            <p>To address the unsatisfactory performance on boundaries, we then propose a novel contrastive boundary learning (CBL) framework for point cloud segmentation.</p> 
            <p>Specifically, the proposed CBL enhances feature discrimination between points across boundaries by contrasting their representations with the assistance of scene contexts at multiple scales.</p> 
            <p>By applying CBL on three different baseline methods, we experimentally show that CBL consistently improves different baselines and assists them to achieve compelling performance on boundaries, as well as the overall performance.</p> 
            <p>The experimental results demonstrate the effectiveness of our method and the importance of boundaries for 3D point cloud segmentation.</p>
        </div>
    </body>
</html>
行高

文字占有的实际高度,可以通过 line-height 来设置行高。
行高可以直接指定一个大小,如3px,3em;也可以设置一个整数,此时行高将是字体的该整数倍。默认行高是1.33倍字体高度。
字体框 字体存在的格子,设置 font-size 实际上是在设置字体框的高度。
行高会在字体框的上下平均分配 java网页中设置的默认字体 javaweb字体_图标字体
java网页中设置的默认字体 javaweb字体_css_03 利用行高使单行文字在其父元素中垂直居中;
java网页中设置的默认字体 javaweb字体_css_03

字体的简写属性

font:设置字体相关的所有属性;省略不写的值都使用默认值。

font: (...其他属性...可以不写) 字体大小(/行高 可以不写) 字体族;
如:
font: italic bold 50px/2 'Times New Roman', serif;
斜体加粗,50px两倍行高,并且选择字体

font-weight:是否加粗 normal,bold
font-style:字体风格,normal,italic

文本的水平和垂直对齐

text-align

  • left 左对齐
  • right 右对齐
  • center居中对齐
  • justify 两端对齐

vertical-align

  • baseline 基线对齐
  • top 顶部对齐(子元素和父元素的顶部)
  • bottom 底部对齐
  • middle 居中对齐
其他样式

text-decoration 设置文本修饰
java网页中设置的默认字体 javaweb字体_css_03 none 什么都没有,可以用来去掉超链接的下划线
java网页中设置的默认字体 javaweb字体_css_03 underline 下划线
java网页中设置的默认字体 javaweb字体_css_03 line-through 删除线
java网页中设置的默认字体 javaweb字体_css_03 overline 上划线
white-space 设置网页如何处理空白
java网页中设置的默认字体 javaweb字体_css_03 normal 正常
java网页中设置的默认字体 javaweb字体_css_03 nowrap 不换行(没显示完全的内容用省略号代替),要结合overflow:hidden;text-overflow:ellipsis;java网页中设置的默认字体 javaweb字体_css_03