阿拉伯语斜体字体

Question

阿拉伯语斜体字体

syr*_*ull 8 css jquery

font-style:italic;将字体向右倾斜,就像这样:我的字体

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

在此输入图像描述

Answer 1

小智 6

您可以使用skewCSS转换声明中调用的内容:

.fontToTransform {
    font-size: 40px;
    transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
}

Run Code Online (Sandbox Code Playgroud)

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

编辑

这是一个很遥远的问题但这里有一个肮脏的例子,它找出文本块中的各个行并将它们中的span每一行放入一个新的行中,这将导致每一行用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);
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

请注意,对文本使用"skew"转换的结果在外观上会比使用实际的斜体变体更糟糕. (4认同)

归档时间：	12 年，8 月前
查看次数：	1645 次
最近记录：	12 年，7 月前