html - 将字体应用于带有 HTML 字符和标签的输入字段中的文本

Question

我正在将自定义非英语非 unicode 字体应用于某些文本。

在某些情况下，这可能包含英文文本。在这种情况下，此英文文本包含在字体标签中，如下所示:

<small><font face="Arial,Helvetica">Some sample text</font></small>

我使用以下方法应用字体:

@font-face {
     font-family: "my_custom_font";
     src: url(static/fonts/my_custom_font.woff);
}

.my_font {
    font-family:"my_custom_font";
    font-size:180%;
}

当我将此字体应用于 div 时，它会按预期显示

<div class="my_font">

<?php print_r($data["title"]); ?>

</div>

但是，当我对输入字段执行相同操作时，我不会得到相同的结果

<input name="title" class="my_font" value="<?php echo htmlspecialchars($data["title"]);  type="text">

字体没有按预期呈现为英文文本，而是应用于 HTML 标签，导致出现垃圾字符。如果我不使用 htmlspecialcharacters，那么输入字段会在出现“face”之后终止

是否可以像对待 div 一样对待输入字段？

Answer 1

首先不要使用字体标签。

Do not use this element! Though once normalized in HTML 3.2, it was deprecated in HTML 4.01, at the same time as all elements related to styling only, then obsoleted in HTML5.

Starting with HTML 4, HTML does not convey styling information anymore (outside the element or the style attribute of each element). For any new web development, styling should be written using CSS only.

然后在您的输入字段中您缺少 php 代码的关闭。应该是

<input name="title" class="my_font" value="<?php echo htmlspecialchars($data["title"]); ?>" type="text">

并为页面使用的字符集添加meta标签

<meta charset="utf-8"> 

是的，您可以根据自己的喜好设置输入框的样式。

.my_font {
    font-family:"my_custom_font";
    font-size:180%;
}