Html样式:font-family在渲染时变得混乱

时间:2017-02-17 09:36:50

标签: jquery html css google-chrome font-family

我正在尝试使用JqueryUI创建一个简单的程序。我用这样的不同字体创建了音符。

<div class="object ui-draggable ui-draggable-handle ui-resizable selected" id="element_9" style="top: 320.919px; left: 1145.88px; color: rgb(185, 54, 68); font-size: 1008.51%; width: 571px; right: auto; height: 606px; bottom: auto; transform: none; font-weight: 400; font-family: &quot;Allerta Stencil&quot;, sans-serif;"
  data-type="text" data-font="f65">
  <div class="text-editable" contenteditable="false" style="cursor: all-scroll;">Enter your text here </div>
  <div class="ui-rotatable-handle ui-draggable" style="transform: scale(2.22222);"></div>
  <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; transform: scale(2.22222);"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; transform: scale(2.22222);"></div>
  <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; transform: scale(2.22222);"></div>
  <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90; transform: scale(2.22222);"></div>
</div>

现在我使用PHP作为HTML文件保存它们。并且尝试加载HTML文件,这是我在浏览器呈现HTML文件后收到的内容。

<div class="object ui-draggable ui-draggable-handle ui-resizable selected" id="element_8" style="top: 320.919px; left: 1145.88px; color: rgb(185, 54, 68); font-size: 1008.51%; width: 571px; right: auto; height: 606px; bottom: auto; transform: none; font-weight: 400; z-index: auto;"
  allerta="" stencil ",=" " sans-serif;"="" data-type="text" data-font="f65">
  <div class="text-editable" contenteditable="false" style="cursor: all-scroll;">Enter your text here </div>
  <div class="ui-rotatable-handle ui-draggable" style="transform: scale(5.71429);"></div>
  <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; transform: scale(5.71429);"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; transform: scale(5.71429);"></div>
  <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; transform: scale(5.71429);"></div>
  <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90; transform: scale(5.71429);"></div>
</div>

正如您所看到的,父标记的样式不一致。我复制了从Chrome Inspector粘贴上面的outerHTML。我可以看到,当我这样做时,Chrome会自动在字体系列之间插入一个“”

object.css({"font-family": this.font_family});

this.font-family 来自一个看起来像这样的JSON

var fonts = [{font_family : 'Allerta Stencil, sans-serif', name: 'f65', val: "Allerta Stencil"},...]

那么为什么重新加载文件时,样式不能正确读回?有没有办法可以克服这个问题。我已经阅读了一些与此类似的问题,其中带空格的字体名称需要引号。我的问题是,如果浏览器包含引号,那么为什么重新加载HTML文件引号会被忽略?

1 个答案:

答案 0 :(得分:1)

当您使用双引号来包装<?php /** * SquirrelMail Configuration File * Created using the configure script, conf.pl */ $config_version = '1.5.0'; $config_use_color = 2; $org_name = "SquirrelMail"; $org_logo = SM_PATH . 'images/sm_logo.png'; $org_logo_width = '308'; $org_logo_height = '111'; $org_title = "SquirrelMail"; $signout_page = ''; $frame_top = '_top'; $provider_uri = ''; $provider_name = ''; $motd = ""; $squirrelmail_default_language = 'en_US'; $default_charset = 'iso-8859-1'; $show_alternative_names = false; $aggressive_decoding = false; $lossy_encoding = false; $domain = 'ferryfair.com'; $imapServerAddress = 'localhost'; $imapPort = 143; $useSendmail = false; $smtpServerAddress = 'localhost'; $smtpPort = 25; $sendmail_path = '/usr/sbin/sendmail'; $sendmail_args = '-i -t'; $pop_before_smtp = false; $pop_before_smtp_host = ''; $imap_server_type = 'dovecot'; $invert_time = false; $optional_delimiter = 'detect'; $encode_header_key = ''; $default_folder_prefix = ''; $trash_folder = 'INBOX.Trash'; $sent_folder = 'INBOX.Sent'; $draft_folder = 'INBOX.Drafts'; $default_move_to_trash = true; $default_move_to_sent = true; $default_save_as_draft = true; $show_prefix_option = false; $list_special_folders_first = true; $use_special_folder_color = true; $auto_expunge = true; $default_sub_of_inbox = true; $show_contain_subfolders_option = false; $default_unseen_notify = 2; $default_unseen_type = 1; $auto_create_special = true; $delete_folder = false; $noselect_fix_enable = false; $data_dir = '/var/local/squirrelmail/data/'; $attachment_dir = '/var/local/squirrelmail/attach/'; $dir_hash_level = 0; $default_left_size = '150'; $force_username_lowercase = false; $default_use_priority = true; $hide_sm_attributions = false; $default_use_mdn = true; $edit_identity = true; $edit_name = true; $edit_reply_to = true; $hide_auth_header = false; $disable_thread_sort = false; $disable_server_sort = false; $allow_charset_search = true; $allow_advanced_search = 0; $time_zone_type = 0; $config_location_base = ''; $disable_plugins = false; $disable_plugins_user = ''; $user_theme_default = 0; $user_themes[0]['PATH'] = 'none'; $user_themes[0]['NAME'] = 'Default'; $user_themes[1]['PATH'] = SM_PATH . 'css/blue_gradient/'; $user_themes[1]['NAME'] = 'Blue Options'; $icon_theme_def = 1; $icon_theme_fallback = 3; $icon_themes[0]['PATH'] = 'none'; $icon_themes[0]['NAME'] = 'No Icons'; $icon_themes[1]['PATH'] = 'template'; $icon_themes[1]['NAME'] = 'Template Default Icons'; $icon_themes[2]['PATH'] = SM_PATH . 'images/themes/default/'; $icon_themes[2]['NAME'] = 'Default Icon Set'; $icon_themes[3]['PATH'] = SM_PATH . 'images/themes/xp/'; $icon_themes[3]['NAME'] = 'XP Style Icons'; $templateset_default = 'default'; $templateset_fallback = 'default'; $rpc_templateset = 'default_rpc'; $aTemplateSet[0]['ID'] = 'default'; $aTemplateSet[0]['NAME'] = 'Default'; $aTemplateSet[1]['ID'] = 'default_advanced'; $aTemplateSet[1]['NAME'] = 'Advanced'; $default_fontsize = ''; $default_fontset = ''; $fontsets = array(); $fontsets['comicsans'] = 'comic sans ms,sans-serif'; $fontsets['serif'] = 'serif'; $fontsets['verasans'] = 'bitstream vera sans,verdana,sans-serif'; $fontsets['tahoma'] = 'tahoma,sans-serif'; $fontsets['sans'] = 'helvetica,arial,sans-serif'; $default_use_javascript_addr_book = false; $addrbook_dsn = ''; $addrbook_table = 'address'; $prefs_dsn = ''; $prefs_table = 'userprefs'; $prefs_user_field = 'user'; $prefs_user_size = 128; $prefs_key_field = 'prefkey'; $prefs_key_size = 64; $prefs_val_field = 'prefval'; $prefs_val_size = 65536; $addrbook_global_dsn = ''; $addrbook_global_table = 'global_abook'; $addrbook_global_writeable = false; $addrbook_global_listing = false; $abook_global_file = ''; $abook_global_file_writeable = false; $abook_global_file_listing = true; $abook_file_line_length = 2048; $no_list_for_subscribe = false; $smtp_auth_mech = 'plain'; $smtp_sitewide_user = ''; $smtp_sitewide_pass = ''; $imap_auth_mech = 'login'; $use_imap_tls = 0; $use_smtp_tls = 0; $display_imap_login_error = false; $session_name = 'SQMSESSID'; $only_secure_cookies = true; $disable_security_tokens = false; $check_referrer = ''; $use_transparent_security_image = true; $use_iframe = false; $ask_user_info = true; $use_icons = true; $use_php_recode = false; $use_php_iconv = false; $buffer_output = false; $allow_remote_configtest = true; $secured_config = true; $sq_https_port = 443; $sq_ignore_http_x_forwarded_headers = true; $sm_debug_mode = SM_DEBUG_MODE_OFF; 属性的值时,您需要在其中使用单引号来包装字体名称。

目前,您正在使用以下内容:

style

但是style="font-family:&quot;Alerta Stencil&quot;,sans-serif;" 是双引号的实体,所以基本上你写的是:

&quot;

上面的第二个引号是&#34;关闭&#34;紧随style="font-family:"Alerta Stencil",sans-serif;" 之后的style属性(我猜测你的PHP正在解析font-family:实体并输出&quot;)。

因此,解决方案是将您的"属性更改为以下内容:

style

要实现此目的,您需要将JSON更改为以下内容:

style="font-family:'Alerta Stencil',sans-serif;"