Question

我想绘制三到四行，以显示正确形成的小写字母，以便在我的网站上教孩子们。请任何人告诉我如何追踪四条线和一条线在他们身上写信。

＆＃13;

table,th,td{
border:1px solid black;
border-collapse:collapse;
text-decoration:overline underline line-through;
}

＆＃13;

<body>
  <table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>kids</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>boys</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>girls</td>
</tr>
</table>
  </body>

＆＃13;

Answer 1

像这样可能

更新了table版本，因为您的问题中已有

span {
  display: inline-block;
  font-family: monospace;
  font-size: 24px;
  width: 440px;
  letter-spacing: 20px;
  text-decoration: overline underline line-through;
}

table, th, td {
  font-family: monospace;
  font-size: 24px;
  letter-spacing: 0px;
  padding: 0;
  border-collapse: collapse;
  text-decoration:overline underline line-through;
}
td:before,
td:after {
  content: '\00a0';
  font-family: inherit;
  font-size: inherit;
}

<span>
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
</span>
<br><br>
<table>
  <tr>
    <td> A </td>
    <td> B </td>
    <td> C </td>
    <td> D </td>
    <td> E </td>
    <td> F </td>
    <td> G </td>
  </tr>
  <tr>
    <td> H </td>
    <td> I </td>
    <td> J </td>
    <td> K </td>
    <td> L </td>
    <td> M </td>
    <td> N </td>
  </tr>
  <tr>
    <td> O </td>
    <td> P </td>
    <td> Q </td>
    <td> R </td>
    <td> S </td>
    <td> T </td>
    <td> U </td>
  </tr>
  <tr>
    <td> V </td>
    <td> W </td>
    <td> X </td>
    <td> Y </td>
    <td> Z </td>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
  </tr>
</table>

Answer 2

您可以使用Monospaced字体（如courier）（每个字体将使用相同的空间），它会使背景线更容易在正确的位置绘制。

使用：http://codepen.io/anon/pen/eZgMMK

如果字体不可用，请考虑安全后退。您可以在这里查看http://www.cssfontstack.com/（以及可在搜索引擎上找到的其他链接）

＆＃13;

div {
  padding:1em 0;
  background:linear-gradient(to right, white, white 3.5em, red 3.5em, red 3.7em, transparent 3.7em),repeating-linear-gradient(to right, transparent 3.7em, gray 3.7em, gray 3.9em, white 3.9em, white 8.186em)
}
p {
  white-space:nowrap;
  letter-spacing:0em;
  font-family:courier;
  height:1.2em;
  font-size:3.7em;
  text-indent:1em;
  background: linear-gradient(to bottom, gray 0.05em, transparent 0.05em, transparent  0.5em ) 0 0 repeat ; 
  background-size:auto 0.42em;
  line-height:1.2em;
  
}
.uppercase {
  text-transform:uppercase;
  background-size:auto 0.28em;
  background-position: 0 0;
}

.lc p {
  font-family: 'lucida console', courier;

＆＃13;

<div>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
  <p class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

<div class="lc">
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
  <p class="uppercase">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

＆＃13;

我如何用三四行写英文字母？

2 个答案: