Laravel 5.3 刀片是不是支持 <font> 标签？

Posted 2023-03-14

【中文标题】Laravel 5.3 刀片是不是支持 <font> 标签？

【英文标题】：Does Laravel 5.3 blade supports <font> tag?Laravel 5.3 刀片是否支持 <font> 标签？

【发布时间】：2017-04-15 11:09:06

【问题描述】：

当我输入时

<font> test </font> 

在 laravel 刀片文件中，chrome 没有呈现任何内容。

编辑：请不要只建议不要使用字体标签，请阅读整个问题。这个字体标签是由所见即所得的编辑器summernote生成的，所以它不是我的选择。

奇怪的是我在页面源代码中看到了这个标签，但它没有呈现在页面上。当我使用相同的源制作本地 html 文件时 - 它会在 Chrome 的字体标签中显示文本。 此外，当我转到开发人员工具元素并单击容器 div 以编辑为 html 时，如果我在任何地方添加任何内容，那么所有字体标签都会突然出现。 Firefox 中的行为完全相同。如果我不在检查器中编辑页面，无论我刷新多少次都不会显示字体标签。

这是我的刀片文件：

@extends('layouts.app')


@section('content')
    <font> test </font>
    <p> <a href="/articles"><-Back</a></p>
    <p> Selected article: $article->title </p>
    <p> Description: $article->description </p>
    <p><img src="/$article->image"  ></p>
    <font> ojo  </font>
    !! $article->body !!
    <p>ge?</p>
@stop

【问题讨论】：

我猜你知道，但如果你不知道，HTML 5 不再支持 标签。也许这就是你得到错误的原因。

详细说明GrowingDev，请阅读@pera：w3schools。此外，最好将 CSS 与 <span> 一起使用。

基本上，刀片文件中支持的所有 html 标签。但是，您的问题与刀片无关。 在 HTML5 中不再支持

字体标签由所见即所得编辑器summernote生成。虽然它在 html5 中不受支持，但所有浏览器仍在显示它。请通读并尝试为这种特殊情况找到解释。

【参考方案1】：

<font></font> 在 HTML 4.01 中与所有仅与样式相关的元素同时被弃用，然后在 HTML5 中被废弃。 这与laravel无关。

<font> 元素的前一种行为可以使用CSS Fonts CSS 属性来实现，甚至可以更好地控制

See more information on <font> here.

编辑

我把你的问题弄错了，http://summernote.org/ 正在生成 <font> 标记。每次summernote 获得输入时，您都可以替换它。像这样：

（可能需要一些调整）

//some dynamic elements have to be triggered from the body
$body = $(document.body);

//container where font excists
$container = $('.container')

//less code to type
function observe(element, event, handler) 
  $body.on(event, element, handler)


//delay 0 to speed up
function delay_func() 
  window.setTimeout(font_to_span(), 0);


//replace font tags with span and extract the font family
function font_to_span() 
  $font = $container.find('font');
  font_family = $font.attr('face');
  $font.replaceWith(function() 
    return $("<span />", 
      html: $(this).html(),
      style: 'font-family:' + font_family + ';'
    );
  );


//add events to trigger font finder_to_span on
observe($container, 'change', font_to_span);
observe($container, 'cut', delay_func);
observe($container, 'paste', delay_func);
observe($container, 'drop', delay_func);
observe($container, 'keydown', delay_func);
font_to_span();

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat, sapien sed tempor dignissim, mi metus tempor enim, <font face="Comic Sans MS">a vestibulum nulla tortor</font> posuere tellus. Etiam eu dolor ut dui viverra dictum non non justo. Duis
  blandit in enim vitae mollis. Integer euismod lectus ut turpis fermentum, eget rutrum urna ornare.</div>

【讨论】：

它与laravel有关，因为如果你用字体标签制作简单的html页面 - 你会看到它就好了。

也许这个 sn-p 会有所帮助？

sn-p 很有用，如果我没有找到这个问题的原因，我会使用它。

【参考方案2】：

我找到了导致这种行为的原因，我应该早点意识到，如果它看起来像魔术 - 它的 javascript。

所以在基本的 Laravel 5.3 刀片页面中，我们在源代码中有字体标签，我们可以在前端的页面源代码中看到它，但它们在页面上不可见。原因是因为 Laravel 5.3 默认包含 Vue javascript 框架，其中包含包含 Vue 的 app.js，它在文档加载时运行一些 Vue 魔法，因此字体标签由于某种原因被隐藏 - 可能与被弃用有关。

我现在从我的 Laravel 应用程序中删除了 Vue（通过删除包含它的 js 代码）并且字体标签又回来了。