美文网首页
关于字体的应用

关于字体的应用

作者: 柒只猫 | 来源:发表于2019-03-19 00:12 被阅读0次

    设置服务器字体

    如果说,我们想要使用自已想要的字体在html中应用,并且上传到服务器之后,别人打开网页看到的字体也是这个的话,那么,我们则需要进行一下的操作

    1. 下载好字体,放到font文件夹中。
    2. 在对应的css文件中使用@font-face属性定义字体。
    3. 对元素应用font-family字体样式
    @font-face {
          font-family: "字体名称";
          src: url("这里可以使用自已放在font中的字体,也可以使用网络上的字体,但是文件后缀得是.ttf");
        }
    

    文本溢出处理

    很多时候,文档的长度很长,所以我们不想看到这么长,需要他能在一行显示,显示不完的,那么就用省略号代替,然后点击之后展开之类的,如果是需要文字超出范围就变成省略号,那么就需要以下的办法
    1.给你需要这个功能的元素加上宽度
    2.应用white-space:nowrap;(空白处符处理,样式文本不能换行)
    3.应用overflow:hidden;(文本溢出就隐藏)
    4.应用text-overflow:ellipsis(超出部分就显示省略号)
    注意点:以上四个步骤,缺一不可

    • html
    <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cumque ea, excepturi inventore minus modi neque pariatur quae repudiandae rerum sequi suscipit, tenetur! A consequatur ducimus facere facilis, nisi voluptatum.
    </p>
    
    • css
     p{
                width: 450px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    

    text-overflow: clip | ellipsis
    默认值: clip
    clip: 当对象内文本溢出的时候不显示省略号,而是将溢出的部分裁减掉
    ellipsis: 当对象内文本溢出时显示省略号(...)

    相关文章

      网友评论

          本文标题:关于字体的应用

          本文链接:https://www.haomeiwen.com/subject/ejzimqtx.html