css字体相关样式的处理

mdluo 发布于2019-08-29 12:30 / 1133人阅读

摘要：连字符断行实现文本两端对齐的方式，可以使用，它接收三个值和。效果如下插入换行上面这种格式的实现，看似简单有很让人头疼，这种格式的形式由于和都是块级元素，导致了名字和值都会换行，有一种很好的处理办法字符中代表换行符。

连字符断行

实现文本两端对齐的方式，可以使用hyphens，它接收三个值none、manual 和auto。manual是它的初始值，将hyphens设置成auto可以实现。为了确保它奏效，需要在HTML标签的lang属性中指定合适的语言。

效果如下：

插入换行

上面这种格式的实现，看似简单有很让人头疼，这种格式的DOM形式：


  Name:
  Lea Verou
  Email:
  lea@verou.me
  lea@verou.me
  Location:
  Earth

由于dt和dd都是块级元素，导致了名字和值都会换行，有一种很好的处理办法：

dt, dd {
    display: inline;
}

dd + dt::before {
    content: "A";
    white-space: pre;
}

dd + dd::before {
    content: ", ";
    font-weight: normal;
}

Unicode字符中A代表换行符。通过设置 white-space: pre，保留源代码中的这些空白符和换行

文本行的斑马条纹的实现

主要思路是：在CSS 中用渐变直接生成背景图像，并且用em 单位来设定背景尺寸，这
样背景就可以自动适应font-size 的变化了。
具体的实现如下：

    urlParams.gitName = record.gitName;
    for (let item in record) {
       if (record[item] == currentId) {
           urlParams.stage = item;
       }
    }
    localStorage.setItem("urlParams", JSON.stringify(urlParams));

.code {
    padding: .5em;
    line-height: 1.5;
    tab-size: 4; /* 接受一个数字或者一个长度值控制代码缩进 */
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

效果如下：

美化&符号

在写页面时，有时会出现经过美化过的&符号，如果用src多带带指定某一种字体的话会增加http请求的次数，通过local这个函数可以解决这个问题，它可以指定本地字体的名称。

在使用font-face将local这个函数引入时，需要指定要渲染的某一个特定的字符，就需要使用unicode-range，它只在@font-face 规则内部生效，它并不是一个CSS属性

unicode-range它的语法是基于“Unicode码位”，因此需要知道字符的十六进制码位，通过
"&".charCodeAt(0).toString(16);（返回26）得到&的十六进制编码

@font-face {
    font-family: Ampersand;
    src: local("Baskerville-Italic"),
    local("GoudyOldStyleT-Italic"),
    local("Palatino-Italic"),
    local("BookAntiqua-Italic");
    unicode-range: U+26;
}
h1 {
    font-family: Ampersand, Helvetica, sans-serif;
}

最终的效果如下：

自定义下划线的方法

处理css默认样式下划线的方法可以使用background-image及其相关的属性，通过它设置渐变达到效果。
具体的实现如下：

 span {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.15em;
    /* 如果下划线在遇到字母时会自动断开避让,通过设置text-shadow模拟*/
    text-shadow: .05em 0 white, -.05em 0 white;
  }

效果如下：

文字凸起、空心、发光的等效果的实现

实现凸版印刷字体的效果

使用投影的效果达到，具体的实现如下：

  .div {
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
  }

最终的效果：

空心字效果的实现

方法是使用用text-shadow 属性的扩张参数就可让投影变大，看起来就像给文字勾边了一样；或者是使用svg

用text-shadow:

div {    
    color: white;
    text-shadow: 1px 1px black, -1px -1px black,
                 1px -1px black, -1px 1px black;
}

最终效果：

用svg的方法：

 h1 {
    font: 500%/1 Rockwell, serif;
    background: deeppink;
    color: white;
  }
  h1 text {
    fill: currentColor;
  }
  h1 svg { 
    overflow: visible
  }
  h1 use {
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
  }

效果如下：

svg的实现方式虽然语法复杂，但是它的视觉效果却是最好的。

文字外发光的效果
实现的方法就是使用重叠的text-shadow即可，不需要考虑偏移量，颜色也只需跟文字保持一致。

.hi {
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
  }

效果如下：

文字凸起的效果

.css3d {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
    0 2px hsl(0,0%,80%),
    0 3px hsl(0,0%,75%),
    0 4px hsl(0,0%,70%),
    0 5px hsl(0,0%,65%);
    0 5px 10px black;
}

效果如下：

环形文字的实现
使用svg实现

  .circular {
    width: 300px;
    height: 300px;
    margin: 3em auto 0;
  }
  .circular svg {
    display: block;
    overflow: visible;
  }
  .circular path { 
    fill: none; 
  }

效果如下：

GPU云服务器云服务器 css的样式 html的css样式酷炫html样式字体 css样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111947.html

webpack4 系列教程(十一)：字体文件处理

摘要：或者来我的小站看更多内容课程介绍和资料本节课源码所有课程源码本节课的代码目录如下本节课的内容如下准备字体文件和样式如上面的代码目录所示，字体文件和样式都放在了目录下。编写按照上面的配置，打包好的和均位于文件夹下。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十一)：字体文件处理》原文地址。或者来我的小站看更多内容：godbmw.com...

UnixAgain 2019-08-23 12:17 评论0 收藏0
前端面试之路一(HTML+CSS面试整理)

摘要：或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。针对多字节文字，中文句子也是单词允许在单词内换行。一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/f...

hqman 2019-08-02 12:09 评论0 收藏0
前端面试之路一(HTML+CSS面试整理)

摘要：或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。针对多字节文字，中文句子也是单词允许在单词内换行。一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/f...

YacaToy 2019-08-29 17:26 评论0 收藏0
CSS编码规范

摘要：代码风格文件建议文件使用无的编码。解释编码具有更广泛的适应性。示例空格强制选择器与之间必须包含空格。示例字号强制需要在平台显示的中文内容，其字号应不小于。示例响应式强制不得单独编排，必须与相关的规则一起定义。转载：原地址 1 前言 CSS作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。虽然本文档是针对CSS设计的，...

flyer_dev 2019-08-28 18:04 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0