将旧的 Html SIZE=+x 转换为 css

问题描述 投票：0回答：4

我正在用 html 和 CSS 重建一个旧网站，从来没有用“旧式”标记制作过一个网站，我不知道 size=+x 在 CSS 中与什么相关，是像素还是什么？有没有办法在 css 中复制它，或者我必须准确指定大小？

简而言之，如何将 x 像素添加到我不知道大小的东西上？

对于我的具体示例，这里是标记：

<H1 ALIGN=CENTER>
    <B><FONT color="red" SIZE=+4>PHONE BOOK</FONT></B>
</H1></CENTER>
html css deprecated
4个回答
6
投票

这个肮脏的旧值相当于这个css

.item{
  font-size: xxx-large;
}

那就是如果你在 webkit 中查看它。 在 Firefox 中，约为 48px。

这是旧的加号和减号标签的作用

这是 W3C 的现代等效项的详细信息

旧字体大小是相对于浏览器当前默认字体大小设置的。 如果您希望您的网站看起来是设计的样子，那么您不想碰碰运气。

想要我的意见，转储它，并使用 em 或 px 值代替。

为了保持你的理智，不要在匹配这些糟糕的旧值上花费太多精力，通过视觉来完成，或者如果你真的很担心，可以对屏幕抓取进行像素比较。

1
投票

简而言之，标签有 7 种文本大小：1-7。 当使用 size=+1 时，默认值始终为 3，这意味着使其大小大于 3（与 size=4 相同）。

它的使用是为了让不同的网络浏览器能够正确显示页面（它们的尺寸明显不同，资源管理器上的尺寸 3 在 Firefox 等上不一样）

在CSS中只需定义一种字体和合适的字母大小即可完成。

进一步阅读：http://www.jonstorm.com/html/font.htm

0
投票

这很大程度上取决于页面上使用的基本字体大小，以及这些字体大小在样式表中的定义方式。确定实际大小的最佳方法是使用 Firebug。检查元素并打开右侧的“计算”选项卡。它会告诉您字体大小（以像素为单位）。

0
投票

正如您在问题中所指出的，

span
标签通常是
font
标签的最佳替代品。您可以设置字体标签在span标签上设置的任何CSS属性，例如字体大小，字体系列，字体粗细（粗体），字体样式（正常，斜体，倾斜），文本装饰（下划线） 、上划线和下划线）和颜色。 
strong
和 
em
是语义标签，通常会产生粗体文本和斜体文本，但它们具有特定的含义，因此如果这些含义不是您想要的，您应该坚持使用 span 标签上的 css 属性。此外，应避免使用 
b
、
u
和 
i
标签。

通过 

size=1
转换 
size=7
是微不足道的，只要您只需在一个浏览器中使其精确即可。所有 
size=+n
和 
size=-n
尺寸均参考当前尺寸。默认大小为 3。如果 
size=+3
内有 
size=-1
，则将它们组合起来并将结果添加到默认值以确定当前的大小数字。所以，3 + 3 - 1 是 
size=5
。任何小于 1 的尺寸都会显示为 
size=1
任何大于 7 的尺寸都会显示为 
size=7
。

如果您只是想要类似于这些尺寸的东西而不诉诸数学，那么使用指定的字体尺寸。

字体标签尺寸编号 CSS 字体大小 px 点 他们
1 
font-size: x-small;
 10 像素 7.5pt 0.63em
2 
font-size: small;
 13px 9.75pt 0.8em
3 
font-size: medium
 16 像素 12分 1em
4 
font-size: large
 18 像素 13.5pt 1.15em
5 
font-size: x-large;
 24 像素 18点 1.5em
6 
font-size: xx-large;
 32 像素 24点 2em
7 
font-size: xxx-large;
 48像素 36pt 3em

此外，还有一个命名的 CSS 大小 

xx-small
，对应于 
9px
、
6.75pt
和 
0.5em
，但没有与字体标签等效的大小。

浏览器可能会以不同的方式呈现字体标签，因此如果您可以选择一种浏览器进行参考，将会有所帮助。这个 JSFiddle 在 

Edge 129.0.2792.65 (arm64)
中显示相同的尺寸。它在任何基于 chromium 的浏览器的任何类似版本中都应该是相同的。 https://jsfiddle.net/majinnaibu/h3zo5wuy/5/

如果您需要支持不同的特定浏览器，请打开小提琴并调整大小。在开发工具滚动中打开页面，以便您可以看到所需大小的行。突出显示树中要复制的字体标签的元素，以查看其像素大小。这是框的像素大小而不是字体。记住高度。选择要修改的span标签并编辑其字体大小样式。如果将鼠标悬停在树中的该标签上，您将看到其框在浏览器中突出显示及其当前大小。您可以更改 font-size 属性的值，该框会实时更新。这样您就不必来回单击来检查或截图来比较像素。

如果 JSFiddle 由于某种原因不可用，那么您可以将此 javascript 粘贴在空主体标记的末尾并加载页面以呈现表格。

const data = [
  {
    label: "xxx-large",
    font_size: 7,
    font_size_mod: 4,
    name: "xxx-large",
    px: 48,
    pt: 36,
    em: 3,
  },
  {
    label: "xx-large",
    font_size: 6,
    font_size_mod: 3,
    name: "xx-large",
    px: 32,
    pt: 24,
    em: 2,
  },
  {
    label: "x-large",
    font_size: 5,
    font_size_mod: 2,
    name: "x-large",
    px: 24,
    pt: 18,
    em: 1.5,
  },
  {
    label: "large",
    font_size: 4,
    font_size_mod: 1,
    name: "large",
    px: 18,
    pt: 13.5,
    em: 1.15,
  },
  {
    label: "medium",
    font_size: 3,
    font_size_mod: 0,
    name: "medium",
    px: 16,
    pt: 12,
    em: 1,
  },
  {
    label: "small",
    font_size: 2,
    font_size_mod: -1,
    name: "small",
    px: 13,
    pt: 9.75,
    em: 0.8,
  },
  {
    label: "x-small",
    font_size: 1,
    font_size_mod: -2,
    name: "x-small",
    px: 10,
    pt: 7.5,
    em: 0.63,
  },
  {
    label: "xx-small",
    font_size: null,
    font_size_mod: null,
    name: "xx-small",
    px: 9,
    pt: 6.75,
    em: 0.5,
  },
]
const columns = ["font size =", "font size +", "name", "px", "pt", "em"]

const make_header_cell = (label) => {
  const cell = document.createElement("th")
  cell.innerText = label
  return cell
}

const make_label_row = (data) => {
  const row = document.createElement("tr")
  row.style.backgroundColor = "lightgrey"
  row.append(make_header_cell(data.font_size))
  row.append(make_header_cell(data.font_size_mod))
  row.append(make_header_cell(data.name))
  row.append(make_header_cell(data.px))
  row.append(make_header_cell(data.pt))
  row.append(make_header_cell(data.em))
  return row
}

const make_data_cell = (value) => {
  const cell = document.createElement("td")
  cell.append(value)
  return cell
}
const make_font_cell = (value, text) => {
  const tag = document.createElement("font")
  tag.size = value
  if (value !== null) {
    tag.innerText = text
  }
  return make_data_cell(tag)
}

const make_font_mod_cell = (value, text) => {
  if (value !== null && value >= 0) {
    value = "+" + value
  }
  return make_font_cell(value, text)
}

const make_span_cell = (value, text) => {
  const tag = document.createElement("span")
  tag.style.fontSize = value
  tag.innerText = text
  return make_data_cell(tag)
}

const make_value_row = (data) => {
  const row = document.createElement("tr")
  row.append(make_font_cell(data.font_size, data.label))
  row.append(make_font_mod_cell(data.font_size_mod, data.label))
  row.append(make_span_cell(data.name, data.label))
  row.append(make_span_cell(`${data.px}px`, data.label))
  row.append(make_span_cell(`${data.pt}pt`, data.label))
  row.append(make_span_cell(`${data.em}em`, data.label))
  return row
}

const make_table = (data) => {
  const table = document.createElement("table")
  table.style.width = "100%"
  const header_row = document.createElement("tr")
  for (const column of columns) {
    const cell = make_header_cell(column)
    header_row.append(cell)
  }
  table.append(header_row)
  for (const row of data) {
    table.append(make_label_row(row))
    table.append(make_value_row(row))
  }
  return table
}

document.body.append(make_table(data))

for (let i = 0; i < 20; i++) {
  const filler = document.createElement("p")
  filler.innerHTML = "&nbsp;"
  document.body.append(filler)
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.