在html中使用特殊字体

2024-04-27 14:26:22

字体：大中小

来源：转载

供稿：网友

在html中使用特殊字体

目的：一首诗，要求从右往左读，垂直排列，类似古文

效果图：

html内容：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>在html中使用特殊字体</title><link rel="stylesheet" href="index.CSS"></head><style>p{font-size: 54px;}</style><body><div class="realistic" style="width: 1200px;height: 800px;">南歌子词二首 柳枝词 一尺深红胜曲尘天生旧物不如新合欢桃核终堪恨里许元来别有人井底点灯深烛伊共郎长行莫围棋玲珑骰子安红豆入骨相思知不知</div></body></html>

index.css内容：

@font-face { font-family: 'pinghei'; src: url('pinghei.eot'); src: url('pinghei.eot?#font-spider') format('embedded-opentype'), url('pinghei.woff') format('woff'), url('pinghei.ttf') format('truetype'), url('pinghei.svg') format('svg'); font-weight: normal; font-style: normal;}

@font-face { font-family: 'font2'; src: url('font2.eot'); src: url('font2.eot?#font-spider') format('embedded-opentype'), url('font2.woff') format('woff'), url('font2.ttf') format('truetype'), url('font2.svg') format('svg'); font-weight: normal; font-style: normal;}

/*使用选择器指定字体*/p{ /*-webkit-writing-mode: vertical-rl;*/ font-family: 'pinghei'; margin: 0 0.5em; line-height: 1.2em; letter-spacing: 10px;}

span{ font-family: 'font2'}

.realistic { -webkit-writing-mode: vertical-rl; color: $color; font-size: 40px; position: absolute; top: $top; left: -400px; //-webkit-filter:contrast(7); opacity: 1/(($steps*2)); transform-origin: 900px 280px; max-width: 1200px; transform: scale($scale,$scale) perspective($perspective) rotateY($rotationY) rotateX($rotationX); text-shadow: 0 0 3px transparentize($color,0.4), 0 0 1px transparentize($color,0.8); text-align: left;}

源文件:

http://yunpan.cn/cwkdus2HhjZKB （提取码：9a47）

上一篇：jQuery实现长文字部分显示代码

下一篇：CSS之overflow属性（2015年06月02日）