精华内容
参与话题
问答
  • CSS字体设置中常用字体大全

    千次阅读 2019-04-12 08:53:46
    CSS字体设置中常用字体大全 .selector { font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu } css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等 说明: 加上中文...

    CSS字体设置中常用字体大全

    .selector { 
    	font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
    }
    

    css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等

    说明:
    加上中文名“微软雅黑”是为了兼容opera。
    MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。

    在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名:

    Mac OS的一些:

    • 华文细黑:STHeiti Light [STXihei]
    • 华文黑体:STHeiti
    • 华文楷体:STKaiti
    • 华文宋体:STSong
    • 华文仿宋:STFangsong
    • 儷黑 Pro:LiHei Pro Medium
    • 儷宋 Pro:LiSong Pro Light
    • 標楷體:BiauKai
    • 蘋果儷中黑:Apple LiGothic Medium
    • 蘋果儷細宋:Apple LiSung Light

    Windows的一些:

    • 新細明體:PMingLiU
    • 細明體:MingLiU
    • 標楷體:DFKai-SB
    • 黑体:SimHei
    • 宋体:SimSun
    • 新宋体:NSimSun
    • 仿宋:FangSong
    • 楷体:KaiTi
    • 仿宋_GB2312:FangSong_GB2312
    • 楷体_GB2312:KaiTi_GB2312
    • 微軟正黑體:Microsoft JhengHei
    • 微软雅黑体:Microsoft YaHei

    装Office会生出来的一些:

    • 隶书:LiSu
    • 幼圆:YouYuan
    • 华文细黑:STXihei
    • 华文楷体:STKaiti
    • 华文宋体:STSong
    • 华文中宋:STZhongsong
    • 华文仿宋:STFangsong
    • 方正舒体:FZShuTi
    • 方正姚体:FZYaoti
    • 华文彩云:STCaiyun
    • 华文琥珀:STHupo
    • 华文隶书:STLiti
    • 华文行楷:STXingkai
    • 华文新魏:STXinwei

    注:如果字体的名称是一个单词的,不需要加引号,否则在ie6,7里面会失效,并且后面的样式也会不生效!

    展开全文
  • CSS字体样式

    万次阅读 2019-05-14 17:34:17
    font-size 指定字体大小,常用单位有em和px font-family ...字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用...
    font-size
    • 指定字体大小,常用单位有em和px
    font-family
    • 指定使用的字体
    1. 常用的中文字体有微软雅黑和宋体,英文字体有Arial
    2. 可以同时指定多个字体,使用英文的逗号分隔,浏览器会按顺序查找,找不到就找下一个,全部没找到就使用系统默认的
    3. 字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用引号
    CSS字体常用技巧:
    1. 现在网页字体大小普遍使用14px+
    2. 尽量使用 偶数 数字字号,因为在有些老式浏览器中使用奇数字号的字体会有bug
    3. 尽量使用 系统默认字体,保证用户在任何浏览器中都可以正常显示
    CSS Unicode 字体

    就是使用Unicode编码表示字体,为了考虑兼容性
    在这里插入图片描述

    font-weight
    • 字体粗细(bold相等于设置该属性的值为700,normal相等于设置该属性值为400–>不用单位,建议使用数字因为解析会更快)
    fon-style
    • normal(一般用于让斜体不倾斜,em标签有加重强调的语义 但是字体会倾斜,可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果)
    字体样式可以连写
    • 即 所有的字体样式 使用一个语句,但是有一定的语法规则和顺序
    1. 选择器 { font : font-style font-weight font-size/line-height font-family; }
    2. 字体样式连写时需要注意:一定要按顺序写,可以有省略不写的样式但是一定要按顺序,而且font-size和font-family是不可以省略的,否则会不起作用
    文本外观样式
    • color:字体颜色
    1. 预定义的颜色如green,red等
    2. 十六进制,顺序是红绿蓝,十六进制是最常用的颜色表示方式
      #ff0000 表示红色,等同于#f00(缩写,必须是两两相同的才可以进行缩写);#00f表示蓝色;#0f0表示绿色;#fff表示白色(所有的颜色都满格),#000000即#000表示黑色(所有的颜色都没有)
    3. RGB代码:rgb(255,255,255)表示白色
    • 文本修饰:text-decoration:none、underlined(比较常用,用于添加下划线和取消下划线)
      在这里插入图片描述
    • line-hight:行间距,一般情况下,行间距只需要比字体大小大7或8个像素就可以了
    • text-align:文本内容的水平对齐方式
    • text-indent:段落首行缩进,单位使用em,1em就是一个字,所以该样式值为2em 表示 段落首行缩进两个字符
    展开全文
  • 7款漂亮的纯css字体样式

    万次阅读 多人点赞 2018-01-03 15:58:46
    简单粗暴,直接上马:<!DOCTYPE html> <title></title> 美丽的中国语 美丽的中国语</h

    这里写图片描述
    简单粗暴,直接上马:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <h1 class="vintage1">美丽的中国语</h1>
            <h1 class="vintage2">美丽的中国语</h1>
            <h1 class="vintage3">美丽的中国语</h1>
            <h1 class="vintage4">美丽的中国语</h1>
            <h1 class="vintage5">美丽的中国语</h1>
            <h1 class='text-reflect-base'>美丽的中国语</h1>
            <div class="text">
                <p>美丽的中国语</p>
            </div>
    <style>
    body{
        text-align: center;
    }
    .vintage1{
    background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
    text-shadow: 5px -5px black, 4px -4px white;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text }
    .vintage2{
    color: transparent;
    -webkit-text-stroke: 1px red;
    letter-spacing: 0.04em;}
    .vintage3 {
    color: transparent;
    background-color : blue;
    text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
    -webkit-background-clip : text;
    }
    .vintage4{
    color: gold;
    letter-spacing: 0;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
    .vintage5{
        font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink
    }
    .text-reflect-base{
        color: palegreen;
        -webkit-box-reflect:below 10px;
    }
    .text{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
        -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
        -webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
        -webkit-background-size: 200% 100%; 
        -webkit-animation: masked-animation 4s linear infinite;
        font-size: 35px;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0  0;
        }
        100% {
            background-position: -100%  0;
        }
    }
            </style>
        </body>
    </html>
    

    没有什么难的,都是css和html,看见喜欢的就直接用咯!

    展开全文
  • CSS font-family 各字体一览表

    万次阅读 多人点赞 2018-05-05 10:04:58
    windows常见内置中文字体字体中文名 字体英文名宋体 SimSun(浏览器默认)黑体 SimHei微软雅黑 Microsoft Yahei微软正黑体 Microsoft JhengHei楷体 ...

    windows常见内置中文字体

    字体中文名 字体英文名

    宋体                      SimSun(浏览器默认)

    黑体                      SimHei

    微软雅黑               Microsoft Yahei

    微软正黑体            Microsoft JhengHei

    楷体                       KaiTi

    新宋体                   NSimSun

    仿宋                       FangSong

    OS X常见内置中文字体

    字体中文名 字体英文名

    苹方                      PingFang SC

    华文黑体               STHeiti

    华文楷体               STKaiti

    华文宋体               STSong

    华文仿宋               STFangsong

    华文中宋               STZhongsong

    华文琥珀               STHupo

    华文新魏               STXinwei

    华文隶书               STLiti

    华文行楷               STXingkai

    冬青黑体简            Hiragino Sans GB

    兰亭黑-简               Lantinghei SC

    翩翩体-简               Hanzipen SC

    手札体-简               Hannotate SC

    宋体-简                   Songti SC

    娃娃体-简                Wawati SC

    魏碑-简                    Weibei SC

    行楷-简                    Xingkai SC

    雅痞-简                    Yapi SC

    圆体-简                    Yuanti SC

    office安装后新增字体

    字体中文名 字体英文名

    幼圆                      YouYuan

    隶书                      LiSu

    华文细黑               STXihei

    华文楷体               STKaiti

    华文宋体               STSong

    华文仿宋               STFangsong

    华文中宋               STZhongsong

    华文彩云               STCaiyun

    华文琥珀               STHupo

    华文新魏               STXinwei

    华文隶书               STLiti

    华文行楷               STXingkai

    方正舒体               FZShuTi

    方正姚体               FZYaoti

    开源字体

    字体中文名 字体英文名

    思源黑体              Source Han Sans CN

    思源宋体              Source Han Serif SC

    文泉驿微米黑       WenQuanYi Micro Hei

    版权字体(汉仪)

    字体中文名 字体英文名

    汉仪旗黑              HYQihei 40S

    汉仪旗黑              HYQihei 50S

    汉仪旗黑              HYQihei 60S

    汉仪大宋简           HYDaSongJ

    汉仪楷体               HYKaiti

    汉仪家书简            HYJiaShuJ

    汉仪PP体简           HYPPTiJ

    汉仪乐喵体简         HYLeMiaoTi

    汉仪小麦体             HYXiaoMaiTiJ

    汉仪程行体             HYChengXingJ

    汉仪黑荔枝             HYHeiLiZhiTiJ

    汉仪雅酷黑W          HYYaKuHeiW

    汉仪大黑简             HYDaHeiJ

    汉仪尚魏手书W      HYShangWeiShouShuW

    版权字体(方正)

    字体中文名 字体英文名

    方正粗雅宋简体    FZYaSongS-B-GB

    方正报宋简体        FZBaoSong-Z04S

    方正粗圆简体        FZCuYuan-M03S

    方正大标宋简体     FZDaBiaoSong-B06S

    方正大黑简体         FZDaHei-B02S

    方正仿宋简体         FZFangSong-Z02S

    方正黑体简体         FZHei-B01S

    方正琥珀简体         FZHuPo-M04S

    方正楷体简体         FZKai-Z03S

    方正隶变简体         FZLiBian-S02S

    方正隶书简体         FZLiShu-S01S

    方正美黑简体         FZMeiHei-M07S

    方正书宋简体         FZShuSong-Z01S

    方正舒体简体         FZShuTi-S05S

    方正水柱简体         FZShuiZhu-M08S

    方正宋黑简体         FZSongHei-B07S

    方正宋三简体         FZSong

    方正魏碑简体         FZWeiBei-S03S

    方正细等线简体      FZXiDengXian-Z06S

    方正细黑一简体      FZXiHei I-Z08S

    方正细圆简体          FZXiYuan-M01S

    方正小标宋简体       FZXiaoBiaoSong-B05S

    方正行楷简体           FZXingKai-S04S

    方正姚体简体           FZYaoTi-M06S

    方正中等线简体       FZZhongDengXian-Z07S

    方正准圆简体           FZZhunYuan-M02S

    方正综艺简体           FZZongYi-M05S

    方正彩云简体           FZCaiYun-M09S

    方正隶二简体           FZLiShu II-S06S

    方正康体简体           FZKangTi-S07S

    方正超粗黑简体        FZChaoCuHei-M10S

    方正新报宋简体        FZNew BaoSong-Z12S

    方正新舒体简体        FZNew ShuTi-S08S

    方正黄草简体            FZHuangCao-S09S

    方正少儿简体            FZShaoEr-M11S

    方正稚艺简体            FZZhiYi-M12S

    方正细珊瑚简体         FZXiShanHu-M13S

    方正粗宋简体             FZCuSong-B09S

    方正平和简体             FZPingHe-S11S

    方正华隶简体             FZHuaLi-M14S

    方正瘦金书简体          FZShouJinShu-S10S

    方正细倩简体              FZXiQian-M15S

    方正中倩简体              FZZhongQian-M16S

    方正粗倩简体              FZCuQian-M17S

    方正胖娃简体               FZPangWa-M18S

    方正宋一简体               FZSongYi-Z13S

    方正剪纸简体               FZJianZhi-M23S

    方正流行体简体           FZLiuXingTi-M26S

    方正祥隶简体               FZXiangLi-S17S

    方正粗活意简体            FZCuHuoYi-M25S

    方正胖头鱼简体            FZPangTouYu-M24S

    方正卡通简体                FZKaTong-M19S

    方正艺黑简体                FZYiHei-M20S

    方正水黑简体                FZShuiHei-M21S

    方正古隶简体                FZGuLi-S12S

    方正幼线简体                FZYouXian-Z09S

    方正启体简体                FZQiTi-S14S

    方正小篆体                    FZXiaoZhuanTi-S13T

    方正硬笔楷书简体          FZYingBiKaiShu-S15S

    方正毡笔黑简体              FZZhanBiHei-M22S

    方正硬笔行书简体           FZYingBiXingShu-S16S


    内容引用自网络

    展开全文
  • 二十款漂亮的CSS字体样式

    万次阅读 2018-03-23 00:21:28
    样式一: body { margin: 0; padding: 0; line-height: 1.5em; font-family: "Times New Roman", Times, serif; font-size: 14px;...background: #f2e7ca url(images/templatemo_body.jpg...
  • css中文字体

    2013-05-13 16:06:24
    css中中文字体(font family)的英文名称
  • 15种非常好看实用的字体供您下载。字体是一款用于艺术设计方面的字体,提供免费下载,字体下载大全提供最全最新的中英文字体素材。
  • 3、CSS 字体

    2020-11-13 12:29:00
    所有CSS字体属性: font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font-size 指定文本的字体大小 font-style 指定文本的字体样式 font-variant 以小型大写字体或者正常字体显示...
  • 例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 例2(淘宝技术研发中心):  font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 例3(加网 ): font:...
  • CSS设置字体文字样式

    万次阅读 2014-11-16 19:42:19
    网页字体样式
  • 7款漂亮的纯css字体样式

    万次阅读 2018-07-12 20:04:57
    简单粗暴,直接上马:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&... &
  • css文字阴影----渐渐模糊效果

    万次阅读 2020-06-17 19:03:02
    文字添加阴影。可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。 text-shadow: 10px 10px 20px pink;/*x轴偏移10px,y轴偏移10px...
  • CSS字体加粗总结

    万次阅读 2016-03-16 11:54:20
    CSS 加粗知识与CSS 加粗实例 DIV+CSS基础知识 CSS 加粗这里指的是通过DIV CSS控制对象的加粗。 使用CSS属性单词 font-weight 对象值:从100到900,最常用font-weight的值为bold font-weight参数: normal : ...
  • CSS 字体拉伸 font-stretch属性

    万次阅读 2018-02-13 22:13:46
    字体拉伸font-stretch属性用来将字体在水平方向上进行拉伸或压缩,让一种字体的字符更宽或更窄。如果水平压缩,则字体变窄,如果水平拉伸,则字体变宽。就像 font-size 属性的预定义关键字(如xx-large)一样,该...
  • div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置。...接下来通过DIV CSS实例实现字体文字上下间距。 为了观察到行距设置效果,新建两个div盒子对象,分别div命名为“.divcss5
  • css文字重叠One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. ...
  • CSS 字体粗细 font-weight属性

    万次阅读 2018-02-13 22:11:05
    字体粗细在CSS中,通过 font-weight属性 用来设置字体的粗细值,取值为 lighter | normal | bold | bolder,默认为 normal。lighter 为细体,normal 为正常粗细,bold 为粗体,bolder 为特粗体。如:.lighter { font...
  • css字体和背景颜色

    千次阅读 2017-04-12 13:02:32
    我们都知道在css中对字体的设置有字号(font-size), 字体(font-family)。对字号我们并不陌生。下面我们来说一下字体。 一、字体font-family 1. 网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面...
  • css文字闪烁效果

    千次阅读 2019-02-13 17:03:40
    使用css3的animation就可以实现   &lt;p class="arktitle"&gt;Ark&lt;/p&gt; .arktitle { font-size: 36px; font-weight: bold; line-height: 280px; background: l...
  • css字体缩放scale()使用实例

    万次阅读 2017-12-11 09:09:18
    #biaoti { font-size:48px; -webkit-transform: scale(0.8,1.5); -moz-transform: scale(0.8,1.5); -o-transform: scale(0.8,15); transform: scale(0.8,1.5);... background-color: rgb(0, 0, 0);

空空如也

1 2 3 4 5 ... 20
收藏数 336,127
精华内容 134,450
关键字:

css字体