鱼C论坛

 找回密码
 立即注册
查看: 9561|回复: 27

[奇技淫巧] H5&C3常用 中文字体 & 颜色大全

[复制链接]
发表于 2017-1-17 13:02:43 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-17 17:54 编辑

作为一名励志有情怀湿意的程序猿

字体细节颜色拿捏非常重要!

特意把压箱底的两张图,送给各位鱼油~


  • 颜色


  • 140428hvmxxea12272u9i1.png


  • 中文字体


  • 属性名 含义 举例
    font-family 设置字体类型 font-family:"隶书"
    font-size 设置字体大小 font-size:13px
    font-style 设置字体倾斜度font-style:italic
    font-weight 设置字体粗细 font-weight:bold
    font 设置所有字体属性 font:italic bold 33px "宋体"


    1f7b0004a5760efb3813.jpeg


    <p>常用属性:

    <br>,让文本换行,很简单。

    <nobr></nobr>,No Break 的缩写,意思是禁止换行。

    font-size,来定义文本的字体、字体颜色、字体尺寸。
    1. <html>
    2. <body>

    3. <h1><font face="verdana">鱼C工作室</font></h1>
    4. <p><font size="5" face="arial" color="red">Web交流学习</font></p>

    5. </body>
    6. </html>
    复制代码

    效果图:



    常用文字显示:
    HTML代码 含义
    <br>  换行
    <hr>  水平线
    <i></i>  斜体
    <b></b> 黑体
    <i></i>  斜体
    <u></u>下划线
    <s></s> 中划线
    <sup></sup> 上标
    <sub></sub> 下标


    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <meta charset="utf-8">
    5.         <title>基本框架</title>
    6. </head>
    7. <body>
    8.         <p>
    9.         <font face="NSimSun" size="33" color="#FF8888">我能设置字体、大小、颜色</font><br>
    10.                 <b>我是黑体</b><br>
    11.                 <i>我是斜体</i><br>
    12.                 <u>我是下划线</u><br>
    13.                 <s>我是中划线</s><br>
    14.                 <hr>
    15.                 <img src="FishC.png" alt="鱼CLogo">
    16.                 <img src="63.gif">
    17.                 <hr size="20" width="50" align="left">
    18.                 <hr size="20" width="50" noshade>
    19.                 FihsC<sup>我是上标</sup><br>
    20.                 FishC<sub>我是下标</sub><br>
    21.         </p>
    22. </body>
    23. </html>
    复制代码

    效果图:
    1.gif










评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
微末非末 + 5 + 5 + 3 感谢楼主无私奉献!

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2021-3-15 22:50:12 | 显示全部楼层
good job bro
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-18 15:09:17 | 显示全部楼层
无条件支持楼主!
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-10 20:05:03 | 显示全部楼层
6666    6666    6666
6         6         6
6666    6666    6666
6    6   6    6   6     6
6666    6666    6666
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-15 10:18:47 | 显示全部楼层
交作业!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Tips</title>
  6.         <style type="text/css">
  7.                 html{
  8.                         background-image: url(../../img/bg_cat.jpg);
  9.                         background-repeat: no-repeat;
  10.                 }
  11.                 body{
  12.                         color: white
  13.                 }
  14.         </style>
  15. </head>
  16. <body>
  17.         <h1><font face="verdana">bilibili</font></h1>
  18.         <p>
  19.                 <font size="5" face="arial" color="red">
  20.                         B站交流学习
  21.                 </font>
  22.         </p>
  23.         <div>
  24.                 <font face="NSimSun" size="33" color="#FF8888">我能设置字体,大小和颜色</font><br>
  25.                 <b>
  26.                         我是黑体
  27.                 </b><br>
  28.                 <i>
  29.                         我是斜体
  30.                 </i><br>
  31.                 <u>
  32.                         我是下划线
  33.                 </u><br>
  34.                 <s>
  35.                         我是中划线
  36.                 </s><br>
  37.                 <hr>
  38.                 <img src="../../img/bg_sea.jpg" alt="大海">
  39.                 <hr size="20" width="50" align="left">
  40.                 <hr size="20" width="50" noshade="noshade">
  41.                 Time<sup>我是上标</sup>
  42.                 Wow<sub>我是下标</sub>
  43.         </div>
  44. </body>
  45. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-7 20:04:11 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>Tips-2-基本框架</title>
  6.         <style type="text/css">
  7.         img{
  8.                 border:6px solid #000000;
  9.                 border-radius:10%;
  10.         }
  11.         </style>
  12. </head>
  13. <body>
  14.         <p>
  15.         <font face="NSimSum" size="33" color="#FF8888">我能設定字體、大小、顏色</font><br>
  16.         <b>我是黑體</b><br>
  17.         <i>我是斜體</i><br>
  18.         <u>我是下劃線</u><br>
  19.         <s>我是中劃線</s><br>
  20.         <hr>
  21.         <img src="FishC.png" alt="魚CLOGO">
  22.         <hr size="20" width="50" align="left">
  23.         <hr size="20" width="50" noshade>
  24.         FishC<sup>我是上標</sup><br>
  25.         FishC<sub>我是下標</sub>
  26.         </p>
  27. </body>
  28. </html>
复制代码


Tips2.jpg

強迫自己要交作業,哈哈哈。
圖片外框不知道不二老師怎麼用的?

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-4-30 15:45:25 | 显示全部楼层
回个帖加个人气支持楼主
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-30 08:50:13 | 显示全部楼层
学习 学习
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-11 02:12:31 | 显示全部楼层
我看W3C中,font建议使用样式代替。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-16 07:57:03 | 显示全部楼层
收藏~
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2017-7-14 23:57:51 | 显示全部楼层
这个非常有用,感谢分享!!!!
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-5-21 16:22:30 | 显示全部楼层
<nobr></nobr>的作用是不换行的意思吗,
  1. <nobr>
  2.                         <div>1</div>
  3.                         <div>2</div>
  4.                 </nobr>
复制代码

结果换行了,这个标签怎么用。。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-13 22:12:28 | 显示全部楼层
谢谢分享
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-30 16:42:43 | 显示全部楼层
没错我又来了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-28 14:37:40 | 显示全部楼层
1111111111
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-7 15:22:33 | 显示全部楼层
默默支持
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-6 19:16:41 | 显示全部楼层
学习
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2017-3-6 13:53:31 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2017-3-6 12:11:23 From FishC Mobile | 显示全部楼层
设计大师
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-5 10:30:56 | 显示全部楼层
盗图
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-9-19 06:53

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表