Desidero mettere in corsivo il testo all'indietro oppure a sinistra nella direzione opposta a questo testo attuale. È possibile farlo in HTML/CSS o anche con Javascript/jQuery?Come in corsivo il testo all'indietro?
risposta
Penso che questo potrebbe essere quello che stai cercando? jsFiddle
Gioca un po 'con il codice. Altrimenti è quasi sicuro che sia impossibile. È possibile farlo in immagine software di editing, come ad esempio verniciatura, ecc
#skewed {
font: 21px Impact, sans-serif;
text-align: center;
background: #ccc
}
#skewed {
width: 350px;
height: 140px;
-moz-transform: skew(-5deg, -5deg);
-o-transform: skew(-5deg, -5deg);
-webkit-transform: skew(-5deg, -5deg);
transform: skew(-5deg, -5deg);
}
<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div>
<!--[if IE]>
<style>
/*
* The following two rules are for IE only and
* should be wrapped in conditional comments.
* The -ms-filter rule should be on one line
* and always *before* the filter rule if
* used in the same rule.
*/
#skewed {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1,
M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1,
SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=-0.08748866352592455,
M21=-0.08748866352592455,
M22=1,
SizingMethod='auto expand');
/*
* To make the transform-origin be the middle of
* the object. Note: These numbers
* are approximations. For more accurate results,
* use Internet Explorer with this tool.
*/
margin-left: -9px;
margin-top: -18px;
}
</style>
<![endif]-->
Grazie per l'aiuto e le informazioni. Non proprio quello che sto cercando, ma la soluzione migliore che ho visto oltre a utilizzare Photoshop o qualche programma per creare il corsivo indietro. Grazie ancora! – L84
Potrebbe essere possibile ruotare il testo.
http://snook.ca/archives/html_and_css/css-text-rotation
Sembra difficile, ma probabilmente si dovrà fare questo su una base per-carattere. Non proprio l'effetto di inclinazione previsto, ma è vicino.
Sfortunatamente, questo metodo sembra piuttosto male: http://jsfiddle.net/RSecc/ –
@arxanas, concordato. MrGreen Buttandolo lì fuori come opzione possibile se non ce ne fossero altri. Sembra che il metodo di skew pubblicato da jos funzionerà correttamente. – Brad
Penso che l'unico modo sarebbe utilizzare un carattere speciale inclinato all'indietro.
La tua unica vera opzione credo sarebbe quella di trovare (o creare) un font che abbia lettere in lettere corsive a rovescio e lo incorpori nella tua pagina web tramite un custom @font-face
.
Per questo è possibile utilizzare uno dei molti generatori font-face on-line, come ad esempio FontSquirrel
Non potresti modificare anche un font? –
Beh, sì. Avresti comunque bisogno di incorporarlo, poiché nessuno dei tuoi utenti avrebbe il font modificato sul loro sistema. – jackwanders
Certo: quello che volevo dire. Stavo solo dicendo che non dovevi effettivamente creare un font da zero. –
ho aggiornato demo Jos' di utilizzare jQuery per avvolgere ogni lettera in un arco, poi trasformare ogni lettera utilizzando l'esempio da Mozilla's transform docs & un demo:
HTML
<div id="skewed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi.
Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a
malesuada erat.
</div>
jQuery
// html function requires jQuery 1.4+
$('#skewed').html(function (i, h) {
h = h.replace(/\s+/g, '\u00a0').split('');
return '<span>' + h.join('</span><span>') + '</span>';
});
CSS
#skewed {
font: 24px Georgia, sans-serif;
background: #ccc;
padding: 10px 20px;
}
#skewed span {
display: inline-block;
/* see https://developer.mozilla.org/en-US/docs/CSS/transform */
-webkit-transform: skewx(20deg);
-o-transform: skewx(20deg);
transform: skewx(20deg);
}
Use and embed nel tuo sito web un font compatibile italico di sinistra, come this one. Ci sono alternative gratuite here.
- 1. Rendi il testo in grassetto e corsivo
- 2. Come disegnare il testo in corsivo su tela Android?
- 3. Corsivo testo contenente un collegamento
- 4. Aggiunta di testo più inclinato al corsivo
- 5. Inconsolata Corsivo in MacVim
- 6. Come rendere il testo in grassetto, corsivo e sottolineato usando jquery
- 7. araba corsivo
- 8. corsivo parziali, axis.text.x
- 9. Come combinare grassetto e corsivo nei CSS?
- 10. Rileva il supporto grassetto e corsivo
- 11. Script Unix Bash per valorizzare/sottolineare/scrivere in corsivo il testo specifico
- 12. UILabel carattere corsivo ritaglio
- 13. rimuovere il corsivo nel pedice in lattice in matplotlib
- 14. Come applicare grassetto e corsivo in un intervallo NSMutableAttributoStringa?
- 15. formato ggplot annotazione corsivo
- 16. Come sottolineare il testo utilizzando printf in C
- 17. Come ottenere il testo esatto da Modifica testo e impostare in visualizzazione testo in Android
- 18. carattere corsivo, grassetto e sottolineato su iPhone
- 19. UITextField rende il testo in grassetto?
- 20. ImageMagick: caratteri grassetto e corsivo?
- 21. HTML in visualizzazione testo con caratteri diversi per grassetto e corsivo
- 22. Posso scrivere in corsivo nella shell Python?
- 23. carattere UILabel: grassetto e corsivo
- 24. Grassetto e Corsivo non funzionano in Firefox o Chrome
- 25. Come espandere il testo selezionato in Edittext Android?
- 26. Come applicare sia il carattere grassetto che il carattere corsivo a una stringa NSAttributa?
- 27. Il carattere personalizzato a volte viene visualizzato in corsivo in IE8/IE7
- 28. Uso @fontface Carica tipi di carattere corsivo
- 29. Come posso creare un NSFont sia grassetto che corsivo?
- 30. Converti UIFont in CTFontRef e aggiungi corsivo sul display Retina
+1 per una domanda interessante, ma ho i miei dubbi che troverete una soluzione soddisfacente. – Spudley