资讯专栏INFORMATION COLUMN

[CSS]《CSS揭秘》第五章——字体排印

lordharrd / 2882人阅读

摘要:连字符断行需要在的属性指定支持的语言尚未支持与结合使用插入换行避免首个前面也加入空行换行符避免逗号前面的空格,不一定为文本行的斑马条纹调整的宽度连字华丽的符号自定义下划线现实中的文字效果发光字效果环形文字

连字符断行
hyphens:auto;

*:需要在HTML的lang属性指定支持的语言
**:chrome尚未支持
*:与word-wrap: break-word结合使用

插入换行
dt,dd{
    display: inline;
}
dd{
    margin: 0;
    font-weight: bold;
}
dd+dt::before{//避免首个dt前面也加入空行
    content: "A";//换行符
    white-space: pre;
}
dd+dd::before{//
    content:",";
    font-weight: normal;
    margin-left: -0.25em;//避免逗号前面的空格,不一定为-.25em
}


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

文本行的斑马条纹
.testdiv{
    white-space: pre;
    padding: .5em;
    background: #fb3;
    line-height: 1.5em;
    background-image: linear-gradient(yellowgreen 50%, transparent 0);
    background-size: auto 3em;
    background-origin: content-box;
}

调整tab的宽度
    tab-size:4;

连字
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
华丽的&符号

......

自定义下划线

......

现实中的文字效果 发光字效果
.testdiv{
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
}

*:text-shadow: h-shadow v-shadow blur color;

环形文字

......

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

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

相关文章

  • CSS揭秘五章字体排印

    摘要:字体排印连字符断行在杂志和书籍中,经常可以见到两端对齐效果。原因是会带来糟糕的显示问题。比如大多数衬线字体中的和。在第三版中,引入了属性华丽的符号通过规则实现只对符号应用特殊的字体。 字体排印 连字符断行 在杂志和书籍中,经常可以见到两端对齐效果。但是在网页设计中,两端对齐效果很少被使用。原因是会带来糟糕的显示问题。text-align: justufy; showImg(https:...

    lk20150415 评论0 收藏0
  • css-secrets (css揭秘) 知识点目录,值得深入学习!

    摘要:通过模糊来弱化背景和滚动提示使用两层背景,控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧 第二章 边框与背景 半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量,////bac...

    DevWiki 评论0 收藏0
  • CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化

    摘要:作为女性,你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视,但并不明显,不然我可能会被影响到。实际上,有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流,不用于商业目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专...

    tianyu 评论0 收藏0
  • CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化

    摘要:作为女性,你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视,但并不明显,不然我可能会被影响到。实际上,有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流,不用于商业目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专...

    yzd 评论0 收藏0
  • CSS 揭秘》作者Lea Verou:我喜欢分享开源的行业文化

    摘要:作为女性,你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视,但并不明显,不然我可能会被影响到。实际上,有时候希腊在性别平等方面比其他西方国家更进步。 本文仅用于学习和交流,不用于商业目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈嘉宾: Lea VerouW3C CSS工作组特邀专...

    leanote 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<