我有chordpro.php生成的html网站;下面的部分是关于这个问题的:
<div class="song">
<table border=0 cellpadding=0 cellspacing=0 class="songline">
<tr class="songlyricchord"><td></td><td> C </td><td> C7 </td></tr>
<tr class="songlyricline"><td>1. </td><td>Moje malé svetielko, chcem, aby svietilo. (</td> <td>hey hey hey)</td></tr></table>
</div>
样式表如下:
/* chordpro CSS for the PmWiki Chordpro recipe heavily modified by Otto Bolyós
See http://pmwiki.org/wiki/Cookbook/ChordPro
Copyright 2006, 2007, 2008, 2009 Simon Davis
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, Version 2, as
published by the Free Software Foundation.
http://www.gnu.org/copyleft/gpl.html
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
v0.3 2009-10-01 add songversion, songnewpage, page-break, line spacing
v0.2 2009-08-20 significant changes to make work properly
v0.1 2008-05-26 spacing between refrains
v0.0 2006-12-27 to go with Chordpro recipe version 0.1
*/
body {
background-color:#fff;
margin-top:0px;
margin-left: 10pt;
margin-right: 10pt;
}
@font-face {
font-family: "Linux Libertine Display G";
src: url("fnts/linlibdg.woff") format('woff');
}
@font-face {
font-family: "Linux Libertine G";
src: local('Linux Libertine G'), url("fnts/linlibg_r.woff") format('woff');
font-style: normal;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_z.woff") format('woff');
font-weight: 600
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_b.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_zi.woff") format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_bi.woff") format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Linux Libertine G";
src: url("fnts/linlibg_r.woff") format('woff');
font-style: italic;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_bi.woff") format('woff');
font-style: italic;
font-weight: bold;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_b.woff") format('woff');
font-weight: bold;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_ri.woff") format('woff');
font-style: italic;
}
@font-face {
font-family: "Ubuntu Mono";
src: url("fnts/ubuntum_r.woff") format('woff');
}
.nav a:hover, .logotext a:hover {
/* color: #316676;*/
text-decoration: none;
text-shadow: 0 0 20px #f3f3f3;
color: #aaf;
/* text-shadow: none;*/
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
outline: 0 none;
}
a:hover {
text-decoration:underline;
}
a:link {
text-decoration: none;
color:#2795B6;
}
a:visited {
text-decoration: none;
color:#2795B6;
}
a:active {
text-decoration: none;
}
/* menu */
.menu {
width:100%;
height:50px;
display:block;
position:absolute;
top:0;
left:0;
background:#000;
color:#fff;
font-family: "Linux Libertine G";
font-size: 14pt;
}
.logo {
float:left;
}
.logotext, .logotext a:link {
text-decoration: none;
color: #fff; /* keep the color */
margin-top: 0px;
padding-top: 0px;
}
.nav {
float:right;
margin-right:10px;
}
.nav ul li {
list-style:none;
float:left;
padding-top: 0px;
margin-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.logo ul li {
list-style:none;
float:left;
padding-top: 0px;
margin-top: 0px;
padding-left: 0px;
padding-right: 10px;
}
.title h1 { /* h1 */
font-size: 25pt;
text-align: center;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp", "smcp";
text-decoration: underline;
padding-bottom: 15px;
padding-top: 0px;
margin-top: 0px;
}
.espievatko {
font-family: "Linux Libertine G", serif;
text-align: center;
font-size: 70pt;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp", "smcp";
margin-top:20px;
margin-bottom:28px;
}
.e {
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: #FF0000;
}
p {
font-size: 14pt;
text-align: justify;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
}
.basic {
font-size: 14pt;
text-align: justify;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
}
.small {
font-size: 10pt;
font-style: italic; /* this one does not work, donno why */
}
.mono, ::-moz-placeholder, ::-o-placeholder, ::-webkit-placeholder, ::placeholder {
font-family: "Ubuntu Mono";
font-size: 11pt;
}
.col2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
column-gap:40px;
-moz-column-gap:60px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
}
.break {
-webkit-page-break-after: column;
-moz-page-break-after: column;
-o-page-break-after: column;
-ms-page-break-after: column;
page-break-after: column;
}
.texty {
width: 100%;
min-height: 180px;
max-height: 400px;
resize: vertical;
}
.search {
-moz-border-radius:5px;
width: 97%;
}
.cislo {
width: 40pt;
}
.white {
color: #fff !important;
}
.italic {
font-style: italic !important;
}
td {
/* padding-right: 2px;*/
/* cell-padding-right: 4px*/
border-spacing: 10px;
border-collapse: separate;
}
.terminal {
font-family: "Ubuntu Mono"
/* background-color: #999999 */
}
.th {
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
text-align: left;
}
.songtitle { /* h2 */
font-size: 16pt;
text-align: left;
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp", "smcp";
text-decoration: underline;
line-height:90%
}
.songsubtitle { /* h3 */
font-family: "Ubuntu Mono", serif;
font-style: italic;
font-size: 10pt;
line-height:0%;
text-indent: 50px;
}
.songalbum { /* div */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
page-break-inside: avoid;
}
.song { /* div around entire markup*/
background-color: White;
}
.songchorus { /* div, to highlight chorus */
/* padding-left: 1.5em; */ /* indent chorus */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
page-break-inside: avoid;
}
.songtab { /* div, for tablature */
font-family: monospace;
font-size: 90%;
line-height: 90%;
white-space: pre;
page-break-inside: avoid;
}
.songline {
/* table, a chord and a lyrics line */
empty-cells: show;
margin: 0em;
padding: 0em;
padding-top: 0.1em;
padding-bottom: .1em;
page-break-inside: avoid;
}
.songlyricchord, /* tr, chord line (above) */
.songlyricline { /* tr, lyric line (below) */
margin: 0em;
padding: 0em;
page-break-inside: avoid;
}
.songlyricchord td /* line element containing one chord */ {
padding-top: 0.1em;
}
.songlyricline td { /* line element containing lyrics for one chord */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
background-color: white;
margin: 0em;
padding: 0em;
white-space: pre;
font-size: 16pt;
line-height: 90%;
}
.songlyricchord td { /* specific chord formatting */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
font-weight: 600;
font-size: 12pt;
}
.songlyricline td { /* specific lyrics formatting */
font-family: "Linux Libertine G", serif;
-moz-font-feature-settings: "case", "cpsp", "liga", "locl", "onum", "pnum", "ss01", "ss02", "ss04", "ss05", "dash", "itlc", "lith", "minu", "quot", "sa01", "sa04", "sa06", "sa08", "thou", "frsp";
color: black;
font-size: 12pt;
}
.songcomment { /* div around comments of all types*/
color: black;
font-family: "Ubuntu Mono";
font-style: italic;
font-size: 10pt;
page-break-inside: avoid;
}
.songcommentsimple, .songcommentitalic, .songcommentbox { /* for span around comments of all types*/
background-color: white;
}
.songcommentsimple { /* span specific comment formatting */
}
.songcommentitalic { /* span specific comment formatting */
font-style: italic;
}
.songcommentbox { /* span specific comment formatting */
border: 1px solid black;
padding-left: 0.2em;
padding-right: 0.2em;
}
.songdebug { /* span, for debug output */
font-size: x-small;
color: Red;
}
.songmessage { /* span, eg unknown directive */
font-weight: bolder;
font-size: smaller;
color: black;
}
.songversion { /* span, for version display */
font-size: smaller;
color: black;
}
.songnewpage { /* div, some browsers may action this formatting */
page-break-after: always; /* ask browser to start a new page */
clear: both; /* clear content before page break */
}
/* end of chordpro.css */
我想做的是,在html示例中,单元格<td>hey hey hey)</td>
应该斜体。
<td class="italic"></td>
, <i></i>
, <div class="italic"><td></td></div>
, <td style="font-style: italic !important;>
。我有类似的问题与class="white"
, important!
解决了这个问题。现在它不工作的class="italic"
。//更新:这里是html, css和所有正在使用的文件的链接
如果您想要(true)斜体,则需要指定斜体字体。您的@font-face
规则现在只引用正常(规则)字体。
或者将某些类设置为td
,如class="italic"
,那么您可以使用:
.songlyricline td.italic {
font-style: italic;
}
或者没有class,如果它总是在行末尾:
.songlyricline td:last-child {
font-style: italic;
}
另外,确保您使用的字体有斜体变体。尝试使用一些基本的字体并检查它是否有效。如果是,那么在你的网站上寻找不同的字体
更新1:您有几个@font-face
具有相同的font-family
名称…只需设置新名称为斜体字体:
@font-face {
font-family: "kurziva";
src: url("fnts/linlibg_i.woff") format('woff');
font-style: italic;
}
,然后将这个新的font-family
应用到你想要的斜体版本的元素上:
.songlyricline td i {
font-family: kurziva;
}
这适用于您的文件。