字体样式：斜体;将字体向右倾斜,就像这样：我的字体
在阿拉伯语中,写作是从右到左,而不是从左到右.我想要实现的是将字体斜体化,使其向左倾斜而不是向右倾斜.有什么建议么？您不必在答案中包含阿拉伯字母.我想要的东西与font-style相反：italic;任何语言.
解决方法
你可以在CSS转换声明中使用一个叫做skew的东西：
.fontToTransform {
font-size: 40px;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
这将使您摆脱实际操纵字体本身的麻烦.这将改变您的文本所在的整个块.您可能需要某种验证来检查每个换行符,并且每次都将它们分隔为新的换行符.因为这可能不是一个真正的解决方案,如果你想剪短(单行)文本,你可以考虑它.
编辑
这是一个很遥远的问题但这里有一个肮脏的例子,它找出文本块中的各个行并将它们中的每一行放在一个新的跨度中,这将导致每一行用skewX样式分别设置样式.干得好：
CSS
#fontTransform {
font-size: 40px;
margin-right: 30px;
text-align: right;
}
#fontTransform span {
display: block;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>HTML</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<p id="fontTransform">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
main.js
'use strict';
$(document).ready(function(){
var d = document.getElementById('fontTransform');
var t = d.innerHTML;
var w = t.split(' ');
var lines = [];
d.innerHTML = w[0];
var height = d.clientHeight;
var tmp_line = [];
for (var i = 0; i < w.length; i++) {
d.innerHTML = d.innerHTML + ' ' + w[i];
tmp_line[tmp_line.length] = w[i];
if (d.clientHeight > height) {
height = d.clientHeight;
console.log(w[i-1]);
delete tmp_line[tmp_line.length-1];
lines[lines.length] = tmp_line;
tmp_line = [];
}
}
// Destroy d.innerHTML
d.innerHTML = '';
var tmp_html = '';
// Refill the lines within spans
for (var i = 0; i < lines.length-1; i++) {
tmp_html = '<span>';
for (var x = 0; x < lines[i].length-1; x++) {
tmp_html = tmp_html + lines[i][x] + ' ';
}
tmp_html = tmp_html.trim();
tmp_html = tmp_html + '</span>';
d.innerHTML = d.innerHTML + tmp_html;
}
});
您可以考虑使用jQuery的resize()绑定来更新具有百分位宽度的文本块.另外,我不确定在一行中不适合的非常长的单词会发生什么.并不是说这可能实际发生,但请记住,它没有经过测试,可能导致文字丢失.真的需要为实际发布做更多测试.
