日度归档:2020年6月30日

如何使用css将html标签中的字体加粗呢?


摘要:
下文讲述css中字体加粗的两种方法分享,如下所示:

字体加粗是html中常用的操作,此操作可使页面中的信息变的醒目,那么在Html中如何对字体加粗呢,下文将通过示例的方式讲述其实现方式

实现思路:
    方式1:
      使用font-weight属性对字体进行加粗操作   
   
    方式2:
      使用font-size属性对字体进行加粗操作

例:

 
<meta charset='utf-8' />
<p>
maomao365.com<br />
字体加粗示例分享
</p>
<hr />
<style>
p.normal {font-weight: normal}
p.thick {font-weight: bold;}
p.thicker {font-weight: 900;}

p.fontsize1{font-size:20px;}
</style>
<p class="normal">猫猫教程-normal</p>
<p class="thick">猫猫教程-thick</p>
<p class="thicker">猫猫教程-thicker</p>

<p class="fontsize1">猫猫教程-font-size:20px;</p>
使用css属性将字体加粗的示例分享

使用css属性将字体加粗的示例分享

CSS3 backface-visibility属性功能简介说明


摘要:
下文讲述csss3中backface-visibility属性的功能说明,如下所示:


backface-visibility属性功能

backface-visibility属性
用于设置选择的对象背面是否显示
backface-visibility属性语法:
backface-visibility:visible|hidden;
—–参数值说明—–
visible:背面是可见的
hidden:背面是不可见的

backface-visibility属性注意事项:
      1.此属性需结合元素旋转至背面才能起效果
      2.此属性是一个css3属性

例:

  
<meta charset="utf-8"> 
 <style>
div
{
	position:relative;
	height:60px;
    line-height:60px;
	width:160px;
	background-color:green;
    color:white;
    padding-left:10px;
    
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg); /* Chrome and Safari */
	-moz-transform:rotateY(180deg); /* Firefox */
}
#div1
{
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
}
#div2
{
	-webkit-backface-visibility:visible;
	-moz-backface-visibility:visible;
	-ms-backface-visibility:visible;
}
</style> 

<p>
maomao365.com <br />
backface-visibility属性示例说明
</p>
<hr />
<div id="div1">猫猫教程- 1</div>

<div id="div2">猫猫教程-- 2</div>
css3 backface-visibility属性示例说明

css3
backface-visibility属性示例说明