Question

font-style:italic;将字体向右倾斜，如下所示： my font

在阿拉伯语中，写作是从右到左，而不是从左到右。我想要实现的是将字体斜体化，使其向左倾斜而不是向右倾斜。有什么建议？您不必在答案中包含阿拉伯字母。我希望在任何语言中都能与font-style:italic;完全相反。

enter image description here

Answer 1

您可以在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);
}

这将使您摆脱实际操纵字体本身的麻烦。这将改变您的文本所在的整个块。您可能需要某种验证来检查每个换行符，并将它们分别作为新标记。因为这可能不是一个真正的解决方案，如果你想剪短（单行）文本，你可以考虑它。

修改的

这是一个很遥远的问题，但这里有一个肮脏的例子，它找出文本块中的各个行，并将每个行放入一个新的span，这将导致每一行用{{单独设置样式。造型。你走了：

<强> CSS

skewX

<强> HTML

#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); }

<强> main.js

<!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>

您可以考虑使用jQuery的'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; } });绑定来更新具有百分位宽度的文本块。另外，我不确定在一行中不适合的很长的单词会发生什么。并非这可能实际发生，但请记住，它没有经过测试，可能导致文字迷失。真的需要为实际发布做更多测试。

Answer 2

作为RTL语言用户，我感到痛苦：）

如何使用阿拉伯语webfont并将其导入CSS？ Amiri是一种开放式网络字体，具有适用于阿拉伯语naskh脚本的排版倾斜。它甚至托管在谷歌CDN上！

然后你可以这样做：

@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
.myItalic{
   font-family: 'Amiri', serif;   
   font-style: italic; 
 }

这是一个有效的JSFiddle example

如果此字体不符合您的喜好，您可以使用其他其他网络字体。 Here are some进行测试。如果不适合你 - 我猜你可以找到一个你喜欢的字体，改变它的斜体版本并以同样的方式嵌入你的页面。

Answer 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（不适用于＆lt; IE10）

支持此功能

Answer 4

不幸的是，使用font-style属性无法做到这一点。请参见此处的页面：http://www.w3schools.com/cssref/pr_font_font-style.asp。我不确定那里是否有阿拉伯字体可能在相反的方向上斜体。如果有，他们可能没有得到广泛的支持。

Answer 5

设置dir=rtl仅影响布局方向。它不会改变文本的方向 - 你仍然在你的例子中看到“一些斜体代码”，而不是“edoc cilati emos” - 它也不会从左到右反映每个字符。

阿拉伯字体的斜体变体，它们通常存在于左侧而不是右侧。（这有时被称为“伊朗”变体。）这不是你可以在CSS中控制的行为，因为它是由字体设计者而不是浏览器做出的决定。

Answer 6

亲爱的，我曾经用两件事来切割wajbah项目。在代码中使用direction rtl：

dir="rtl"

之后，您要向右侧显示的内容使用float right。

它会解决你的问题。

试试并回复。

阿拉伯语斜体字体

6 个答案: