html、css文字加粗方法

浏览: 595次 日期:2017年11月25日 19:19:21 作者:青格勒

一般来说前端加粗字体的方法有两种,一个是html标签加粗的方法,另一个是css加粗字体的方法,还有一个是字体加粗方法。前两个是我们最常用的方法,后一个感觉有点非主流的方法,也不知道我是怎么想到这种方法的,有点为自己的智商感到悲伤,下面给大家详细的介绍一下。

一、标签方法加粗文字

1、h(1~6标签)书写方式

<h1>h1标签 -> CGLweb前端</h1>
<h2>h2标签 -> CGLweb前端</h2>
<h3>h3标签 -> CGLweb前端</h3>
<h4>h4标签 -> CGLweb前端</h4>
<h5>h5标签 -> CGLweb前端</h5>
<h6>h6标签 -> CGLweb前端</h6>

2、页面效果

h1标签 -> CGLweb前端

h2标签 -> CGLweb前端

h3标签 -> CGLweb前端

h4标签 -> CGLweb前端

h5标签 -> CGLweb前端
h6标签 -> CGLweb前端

 

2、strong标签

<strong>strong标签 -> CGLweb前端</strong>

strong标签 -> CGLweb前端

 

3、b标签

<b>b标签 -> CGLweb前端</b>

b标签 -> CGLweb前端

 

这其中我们一般是使用strong来加粗的,原因如下,b标签现在已经是废弃标签,所以我们就不用了。

h标签一般用在SEO优化的,所以除非是列表、二级菜单、详情页标题除外不建议使用。

因为有些浏览器对h标签定义的文字大小不一样,所以我们为了每一个浏览器上文字大小一样,会设置一样的fon-size。


 

二、CSS方法加粗文字

css有个文字加粗的属性

font-weight:normal|bold|bolder|lighter|inherit|

1、normal:默认值。定义标准的字符。

2、bold:定义粗体字符。

3、bolder:定义更粗的字符。

4、lighter:定义更细的字符。

5、数字:|100|200|300|400|500|600|700|800|900定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。

6、inherit:规定从父元素继承字体的粗细。

1、css书写方式为一下:

<style type="text/css">
    .p_text_1{ font-weight:normal;}
    .p_text_2{ font-weight:bold;}
    .p_text_3{ font-weight:bolder;}
    .p_text_4{ font-weight:lighter;}
    .p_text_5{ font-weight:700;}
    .p_text_6{ font-weight:inherit;}
</style>

2、页面效果可以自己试一下

其实感觉css加粗的各种数值和属性,以我24K合金眼睛来观察了一下,并没有什么区别,只有加粗和不加粗的区别而已,希望有知道的道友指点一二。


 

二、字体加粗方法

1、书写方式

<p style="font-family:'楷体';">CGLweb前端 -> font-family:'楷体'</p>
<p style="font-family:'黑体';">CGLweb前端 -> font-family:'黑体'</p>
<p style="font-family:'Impact';">CGLweb前端 -> font-family:Impact</p>
<p style="font-family:'仿宋';">CGLweb前端 -> font-family:'仿宋'</p>
<p style="font-family:'微软雅黑';">CGLweb前端 -> font-family:'微软雅黑'</p>

2、页面效果

CGLweb前端 -> font-family:’楷体’

CGLweb前端 -> font-family:’黑体’

CGLweb前端 -> font-family:Impact

CGLweb前端 -> font-family:’仿宋’

CGLweb前端 -> font-family:’微软雅黑’

 

这个方法在很久以前使用过,主要是用在英文会好点,咱们就看Impact这个字体就能知道加粗是多么的厉害了。

汉字的话因为考虑到电脑上缺失字体的原因不建议使用,目前还没有在汉字上使用过。

文章链接:http://cenggel.com/htmlcss/5.html

版权声明:文章《html、css文字加粗方法》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

一条回应:“html、css文字加粗方法”

  1. 孙家辉说道:

    这个必须收藏,原创的东西。

发表评论

电子邮件地址不会被公开。 必填项已用*标注