当前位置:网站首页 / web前端 / 正文

AY H5笔记10-字体和文本和服务端字体

时间:2020年09月30日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 48次 | 评论 0

css3 新增服务端字体,客户端未安装指定字体,也能呈现统一的界面

字体相关属性

font: fontstyle font-variant font-weight font-size line-height font-family

为了更精确控制,不直接使用font,例如如下


字体颜色 color:"#FFFF00"

字体       font-family:"微软雅黑" 或者 fobt-family:"微软雅黑","隶书" 多个字体

字体大小font-size:"20px"; 可以绝对大小,也可以相对大小

字体大小,绝对尺寸

 xx-small < x-small <small < medium <large < x-large  < xx-large 

字体大小 相对尺寸

larger 相对于父元素中的字体进行相对增大

smaller  相对于父元素中的字体进行相对减少

具体数值或者百分比,如果百分比,则相对于父元素中字体的百分比值,输入是 数值+单位,例如 11pt,11px等


font-size-adjust 用于对不同字体的字体尺寸进行微调。可以指定none,不调整 或者用一个数值代表调整比例。

开始demo,未加此属性效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
      #div1{
          font-size: 16pt;
          font-family: "Courier New";
      }
      #div2{
          font-size: 16pt;
          font-family: "Roma";
      }
      #div3{
          font-size: 16pt;
          font-family: "Impact";
      }
    </style>
</head>

<body>
 <div id="div1">我ay,1991年出生,www.ayjs.net</div>
 <div id="div2">我ay,1991年出生,www.ayjs.net</div>
 <div id="div3">我ay,1991年出生,www.ayjs.net</div>
</body>

</html>

image.png

关于aspect=字母中小写字母x的高度除以该字母的大小。每种字体的aspect值是固定的。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
      #div1{
          font-size: 16pt;
          font-family: "Courier New";
          font-size-adjust: 0.41;
      }
      #div2{
          font-size: 16pt;
          font-family: "Roma";
          font-size-adjust: 0.66;
      }
      #div3{
          font-size: 16pt;
          font-family: "Impact";
          font-size-adjust: 0.93;
      }
    </style>
</head>

<body>
 <div id="div1">我ay,1991年出生,www.ayjs.net</div>
 <div id="div2">我ay,1991年出生,www.ayjs.net</div>
 <div id="div3">我ay,1991年出生,www.ayjs.net</div>
</body>

</html>

反正我的浏览器没效果

image.png

w3school也没效果:查看



font-stretch: 文字横向拉伸,默认normal,还有2个值,narrower (横向压缩)和wider(横向拉伸)

font-style:设置文字风格,normal,italic斜体,oblique倾斜字体

font-weight:  加粗,lighter,normal,bold,bolder 更细,正常,加粗,更粗。还可以具体数值100,200..900

text-decoration:  修饰线,none(无修饰),blink(闪烁),underline(下画线),line-through(中画线)和overline(上画线)

font-variant: 文字大写字母的格式,normal,small-caps(小型的大写字母字体)




text-transform 转换,none,capitalize(首字母大写),uppercase(全部大写),lowercase(全部小写)

line-height:行高,字体最底端与字体内部顶端之间的距离。为负值的行高可用来实现阴影效果

letter-spacing: 字符之间的距离 ,值为 normal和数值+单位。

word-spacing:单词之间的距离。值为 normal和数值+单位。

image.png


text-shadow 阴影, 颜色 阴影在横向的偏移 阴影在纵向的偏移 模糊半径,越大越模糊 

image.png

image.png

也可以交换参数值的位置

添加多个阴影

 <span style="text-shadow: 10px 10px 2px gray,-5px -5px 3px green,20px 0px 2px blue">hello 杨洋,AYJS.NET</span><br />

image.png



颜色表示

颜色名: white,red等

十六进制: #FF0000,#F00,  如果6位,2位红+2位绿+2位蓝。  (第一个FF表示红光值0-255个色阶) 如果3位,1位红+1位绿+1位蓝。  

rgb(r,g,b): rgb(255,255,0)

hsl(Hue,Saturation,Lightness)  色调,饱和度,亮度。  hsl(120,100%,100%)     第一个值0-360 ,0是红色,120是绿色,240蓝色

rgba(r,g,b,a) : 和rgb一样,多了个a,a的值0-1

hsla(h,s,l,a): hsla(120,80%,50%,0.5) 


image.png



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

文本相关属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            border: 1px solid #000;
            height: 30px;
            width: 300px;
        }

    </style>
        <div style="text-indent: 10pt;">缩进10pt www.ayjs.net</div>
    <div style="text-indent: 20pt;">缩进text-indent=20pt</div>
    <div style="text-indent: 40pt;">缩进text-indent=40pt</div>
    <div style="text-align: center;">居中对齐text-align: center;</div>
    <div style="text-align: right;">向右对齐text-align: right;</div>
    <div style="direction: rtl;">右边流入direction: rtl;</div>
    <div style="direction: ltr;">左边流入direction: ltr;</div>
    <div style="overflow: hidden;white-space: nowrap;text-overflow: clip;">测试不换行,文字溢出时候,简单裁剪</div>
    <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">测试不换行,文字溢出时候,显示裁剪标记"</div>
    </body>

</html>


image.png

使用white-space处理空白

normal: 默认,忽略空白

pre: 保留所有空白,类似<pre/>标签

nowrap:不换行,直到遇到<br/>

pre-wrap:保留空白符序列,但可以正常换行

pre-line: 合并空白序列,保留换行符.(比如连续好几个空白,只保留1个)

inherit: 继承父类的white-space




使用word-break处理单词

word-break: keep-all 只能在半角空格或连续字符处换行

break-all: 允许在单词中间换行。

    <div style="height:80px;overflow: hidden;white-space: wrap;word-break:break-all;">Hello Word,Hello Worldwide Hello World Hello Worldwide World</div>
    <div style="height:80px;overflow: hidden;white-space: wrap;word-break:keep-all;">Hello Word,Hello Worldwide Hello World Hello Worldwide World</div>

image.png



使用word-wrap 控制长单词或URL地址换行

normal: 浏览器默认

break-word:  可以直接在单词内就换行了(对于长单词不够显示了,还有URL),类似word-break:break-all(会让每一行最后一个单词换行)




使用服务器字体

拷贝几个字体跟html一个路径

image.png

双击找到名称,我用的屏幕识别文字,复制的,TIM聊天自带

image.pngimage.png

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            border: 1px solid #000;
            height:80px;
            width: 600px;
        }

        @font-face {
            font-family: ".System San Francisco Display";
            src: url("System San Francisco Display Thin.ttf") format("OpenType")
        }
    </style>
    <div style="text-indent: 10pt;font-family:'.System San Francisco Display';font-size:28pt;font-style: italic;">缩进10pt www.ayjs.net</div>
    <div style="text-indent: 20pt;">缩进text-indent=20pt</div>
    <div style="text-indent: 40pt;">缩进text-indent=40pt</div>
    <div style="text-align: center;">居中对齐text-align: center;</div>
    <div style="text-align: right;">向右对齐text-align: right;</div>
    <div style="direction: rtl;">右边流入direction: rtl;</div>
    <div style="direction: ltr;">左边流入direction: ltr;</div>
    <div style="overflow: hidden;white-space: nowrap;text-overflow: clip;word-break:break-all;">测试不换行,文字溢出时候,简单裁剪</div>
    <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">测试不换行,文字溢出时候,显示裁剪标记"</div>
    <div style="height:80px;overflow: hidden;white-space: wrap;word-break:break-all;">Hello Word,Hello Worldwide Hello
        World Hello Worldwide World</div>
    <div style="height:80px;overflow: hidden;white-space: wrap;word-break:keep-all;">Hello Word,Hello Worldwide Hello
        World Hello Worldwide World</div>
    </body>

</html>


我用wamp搭建的web服务器。

手机访问测试下,结果,forbidden错误,百度记录下

我的路径

wamp64\bin\apache\apache2.4.37\conf\extra

打开httpd-vhosts.conf文件

 image.png

修改:

把AllowOverride none 改为AllowOverride all。

把Require local删掉或用#注释掉

添加Require all granted这条语句,意思是允许所有请求访问资源。

image.png

然后重启wamp

image.png

打开手机输入地址

image.png

加一个斜体

image.png


上面代码,用的字体是ttf, 同样的也支持otf,

format可以是 OpenType或者TrueType

还有eot等字体

@font-face {

  font-family: 'MyWebFont';

  src: url('webfont.eot'); /* IE9 Compat Modes */

  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('webfont.woff') format('woff'), /* Modern Browsers */

       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

经过测试,上面的名字不一定要根据字体里面的文字来。

image.png

字体也可以是网络上的

    @font-face {
            font-family: "SysteDisplay";
            src:url('http://www.w3cschool.css/css3/Sansation_Light.ttf') format("OpenType");
        }

image.png



优先客户端字体

使用local() 如果客户端有隶书字体,用隶书,没有的话用服务端的字体

      @font-face {
            font-family: ".System San Francisco Display";
            src:local("隶书"),url("System San Francisco Display Thin.ttf") format("OpenType")
        }

image.png



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========







推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表