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

效果图：

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;">
<span>南歌子词二首</span>
<span> 柳枝词</span>
<p>一尺深红胜曲尘</p>
<p>天生旧物不如新</p>
<p>合欢桃核终堪恨</p>
<p>里许元来别有人</p>
<p>井底点灯深烛伊</p>
<p>共郎长行莫围棋</p>
<p>玲珑骰子安红豆</p>
<p>入骨相思知不知</p>
</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）

在html中使用特殊字体的更多相关文章

  1. 在CSS中通过@font-face属性来实现网页中嵌入特殊字体。

    首先获取要使用字体的三种文件格式.EOT..TTF或.OTF..SVG,确保能在主流浏览器中都能正常显示该字体..EOT,适用于Internet Explorer 4.0+.TTF或.OTF,适用于F ...

  2. 使用pango-Cairo列出系统中的有效字体

    使用pango-Cairo列出系统中的有效字体,代码来源于gtk-app-devel-list fonts list using pango #include <glib.h> #incl ...

  3. 网页中导入特殊字体@font-face属性详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

  4. Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...

  5. Oracle EBS的BIP报表中显示特殊字体

    http://oracleseeker.com/2009/08/25/font_mapping_setup_for_special_character_print_in_oracle_ebs_bip/ ...

  6. Eclipse中项目面板字体的修改

    修改eclipse安装目录中的如下文件,添加黄色标记部分,并设定自己需要的字体大小(这里是10px)即可: \eclipse\plugins\org.eclipse.ui.themes_1.1.1.v ...

  7. PowerDesigner修改设计图中文字的字体大小等样式

    设计图中默认的字体是对英文比较合适的,中文就看不清楚了,特别不美观.但是可以通过修改“Display Preferences”适应我们的汉字. 我使用的PowerDesigner版本是15.1(测试版 ...

  8. web中的中文字体的英文名称

    自从font-face出现以后,字体样式就不再是web开发者的难题了,但是对于移动端的中文来说,问题还是存在的,因为中文文件大小最少要3M+,即使选择性的加载某个字的字体,那也会出现不易替换的问题,所 ...

  9. iOS开发中涉及的字体问题

    iOS中常见3种方法来控制字体,下面根据我在网上学习总结的内容发布(已完美避过所有坑,iOS8.4) 一.系统默认的设置字体方法(只对英文和数字生效的方法) 1.系统默认提供的字体主要是指UIFont ...

随机推荐

  1. Javascript高级编程学习笔记（68）—— 事件（12）设备事件

    设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...

  2. Metasploit Framework（1）基本命令、简单使用

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 基本的控制台命令介绍: banner 查看metasp ...

  3. 如何实现一个基于 jupyter 的 microservices

    零.背景: 现有基于 Node.js 的项目,但需要整合 Data Science 同事的基于 python(jupyter) 的代码部分,以实现额外的数据分析功能.于是设想实现一个 microser ...

  4. docker 简单介绍及基础命令运用

    一.什么是docker? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. 简单的来讲Docker实际上就是一个大型容器.容器是完全使用沙箱机制,相互之间不 ...

  5. 朴素贝叶斯算法简介及python代码实现分析

    概念: 贝叶斯定理:贝叶斯理论是以18世纪的一位神学家托马斯.贝叶斯(Thomas Bayes)命名.通常,事件A在事件B(发生)的条件下的概率,与事件B在事件A(发生)的条件下的概率是不一样的:然而 ...

  6. [原创]K8mysqlCmd数据库免驱连接工具

    无需机器安装MYSQL驱动,可用于内网渗透(如远控cmd下连接目标内网不可上网机器数据库) 当然目标机可代理出来的话,没必要使用该工具了 因为很多功能SQL语句需要自己打,很多人可能不懂 如果更新2. ...

  7. HP-JavaUtil: xls 操作类

    Written In The Font 谢谢,陈明.哈哈!共勉,努力搞定它. 路漫漫其修远兮,吾将上下而求索 Content ExportExcelAndSave( String[] header, ...

  8. Netty源码分析（二）：服务端启动

    上一篇粗略的介绍了一下netty,本篇将详细介绍Netty的服务器的启动过程. ServerBootstrap 看过上篇事例的人,可以知道ServerBootstrap是Netty服务端启动中扮演着一 ...

  9. JavaScript之ECMA对象的学习

    从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词.ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语 ...

  10. 你可能没听过的11个Python库

    目前,网上已有成千上万个Python包,但几乎没有人能够全部知道它们.单单 PyPi上就有超过47000个包列表. 现在,越来越多的数据科学家开始使用Python,虽然他们从 pandas, scik ...