font-style:italic;像这样将字体向右倾斜：我的字体
在阿拉伯语中，书写是从右到左，而不是从左到右。我想要实现的是将字体斜体化，使其向左倾斜而不是向右倾斜。有什么建议么？您不必在答案中包含阿拉伯字母。font-style:italic;我想要与任何语言相反的东西。
问问题
2613 次
5 回答
7
您可以使用skewCSS 转换声明中调用的内容：
.fontToTransform {
font-size: 40px;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
这将使您摆脱实际操作字体本身的麻烦。这将改变您的文本所在的整个块。您可能需要某种验证来检查每个换行符并将它们分隔为每次新标签。因此，这可能不是一个真正的解决方案，如果您想剪切较短（单行）的文本，您可能会考虑它。
编辑
这有点牵强，但这是一个肮脏的例子，它找出文本块中的各个行并将它们中的每一行放入一个 newspan中，这将导致每行单独使用样式设置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()绑定来更新具有百分位宽度的文本块。另外，我不确定如果很长的单词不适合一行会发生什么。并不是说这可能真的会发生，但请记住，它未经测试，可能会导致单词丢失。确实需要为实际发布做更多的测试。
于 2013-03-11T20:42:20.107 回答
4
作为一名 RTL 语言用户，我感受到了你的痛苦 :)
使用阿拉伯语网络字体并将其导入您的 CSS 怎么样？ Amiri是一种开放的网络字体，具有适合阿拉伯语 naskh 脚本的排版倾斜。它甚至托管在谷歌 CDN 上！
然后你可以这样做：
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
.myItalic{
font-family: 'Amiri', serif;
font-style: italic;
}
这是一个有效的JSFiddle 示例
如果您不喜欢此字体，您可以使用其他其他网络字体。这里有一些要测试的。如果这些都不适合您 - 我想您可以找到您喜欢的字体，更改其斜体版本并以相同的方式将其嵌入您的页面。
于 2013-03-15T21:34:47.003 回答
3
同意 Allendar（从上方）
可以很容易地在 CSS3 中完成。根本不需要 JavaScript……。
这是你的答案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.skewTheFont {
transform: skewX(10deg);
-webkit-transform: skewX(10deg);
-moz-transform: skewX(10deg);
font-size: 60px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
</style>
<!-- Style ends here -->
</head>
<body>
<p class="skewTheFont">Arabic Font</p>
</body>
</html>
但是，FF、IE10 和 Chrome 支持此功能（不适用于 < IE10）
于 2013-03-19T00:59:28.123 回答
0
不幸的是，没有办法使用 font-style 属性来做到这一点。请参阅此处的页面：http: //www.w3schools.com/cssref/pr_font_font-style.asp。我不确定那里是否有可能以相反方向斜体的阿拉伯字体。如果有，它们可能没有得到广泛的支持。
于 2013-03-11T20:39:30.223 回答
-1
亲爱的，我曾经用两件事来分割 wajbah 项目。在代码中使用方向 rtl 为：
dir="rtl"
之后，您要在右侧显示的内容使用float right。
它将解决您的问题。
试试看，请回复。
于 2013-03-11T21:23:44.123 回答