CSS字体大小以保持相同的字宽

Question

我正在尝试获取单词“ Hello”，“ Projects”，“ Social”和“ Contact”以响应地调整其字体大小，以使这些单词的宽度相同，而不必逐个逐个输入像素。

我以为我正在使用视口宽度进行操作，但这并没有达到我想要的效果。

查看图像以获得所需的效果。

Answer 1

您可以使用Collecting python-binance Downloading https://files.pythonhosted.org/packages/da/fe/c923be9df86a7d540f31e1292990a14f77652371f1800741129e9fa3e9e4/python_binance-0.6.9-py2.py3-none-any.whl Requirement already satisfied: requests in /Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages (from python-binance) (2.11.1) Collecting certifi (from python-binance) Downloading https://files.pythonhosted.org/packages/7c/e6/92ad559b7192d846975fc916b65f667c7b8c3a32bea7372340bfe9a15fa5/certifi-2018.4.16-py2.py3-none-any.whl (150kB) Collecting service-identity (from python-binance) Downloading https://files.pythonhosted.org/packages/29/fa/995e364220979e577e7ca232440961db0bf996b6edaf586a7d1bd14d81f1/service_identity-17.0.0-py2.py3-none-any.whl Collecting chardet (from python-binance) Downloading https://files.pythonhosted.org/packages/bc/a9/01ffebfb562e4274b6487b4bb1ddec7ca55ec7510b22e4c51f14098443b8/chardet-3.0.4-py2.py3-none-any.whl (133kB) Collecting autobahn (from python-binance) Downloading https://files.pythonhosted.org/packages/c9/7a/140264ec2c162bb22f91be76a11554f8ab0eda9bb2c775b6bc0dbbef0d4a/autobahn-18.6.1-py2.py3-none-any.whl (294kB) Collecting urllib3 (from python-binance) Downloading https://files.pythonhosted.org/packages/bd/c9/6fdd990019071a4a32a5e7cb78a1d92c53851ef4f56f62a3486e6a7d8ffb/urllib3-1.23-py2.py3-none-any.whl (133kB) Requirement already satisfied: six in /Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages (from python-binance) (1.10.0) Collecting cryptography (from python-binance) Downloading https://files.pythonhosted.org/packages/40/87/acdcf84ce6d25a7db1c113f4b9b614fd8d707b7ab56fbf17cf18cd26a627/cryptography-2.2.2-cp34-abi3-macosx_10_6_intel.whl (1.5MB) Collecting dateparser (from python-binance) Downloading https://files.pythonhosted.org/packages/ac/9e/1aa87c0c59f9731820bfd20a8b148d97b315530c2c92d1fb300328c8c42f/dateparser-0.7.0-py2.py3-none-any.whl (357kB) Collecting Twisted (from python-binance) Downloading https://files.pythonhosted.org/packages/12/2a/e9e4fb2e6b2f7a75577e0614926819a472934b0b85f205ba5d5d2add54d0/Twisted-18.4.0.tar.bz2 (3.0MB) Complete output from command python setup.py egg_info: Download error on https://pypi.org/simple/incremental/: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:645) -- Some packages may not be found! Couldn't find index page for 'incremental' (maybe misspelled?) Download error on https://pypi.org/simple/: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:645) -- Some packages may not be found! No local packages or working download links found for incremental>=16.10.1 Traceback (most recent call last): File "<string>", line 1, in <module> File "/private/tmp/pip-install-up7_h6t7/Twisted/setup.py", line 21, in <module> setuptools.setup(**_setup["getSetupArgs"]()) File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/setuptools/__init__.py", line 128, in setup _install_setup_requires(attrs) File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/setuptools/__init__.py", line 123, in _install_setup_requires dist.fetch_build_eggs(dist.setup_requires) File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/setuptools/dist.py", line 514, in fetch_build_eggs replace_conflicting=True, File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/pkg_resources/__init__.py", line 770, in resolve replace_conflicting=replace_conflicting File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/pkg_resources/__init__.py", line 1053, in best_match return self.obtain(req, installer) File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/pkg_resources/__init__.py", line 1065, in obtain return installer(requirement) File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/setuptools/dist.py", line 581, in fetch_build_egg return cmd.easy_install(req) File "/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/setuptools/command/easy_install.py", line 667, in easy_install raise DistutilsError(msg) distutils.errors.DistutilsError: Could not find suitable distribution for Requirement.parse('incremental>=16.10.1')单位调整font-size和letter-spacing

vw

.title {
  font-size: 15vw;
  padding: 20px 0;
  font-family: arial;
}

.title:first-child {
  letter-spacing:5vw;
}

Answer 2

您可以使用JavaScript在跨度中包装每个字母。然后，您可以使用flexbox在!内均匀分布spans。

以下示例中的单词在p中具有固定宽度的div内。您可以根据需要使用其他单位-px，%等

示例

vw

const words = document.querySelectorAll('.tracking');

for (let i = 0; i < words.length; i++) {
  const text = words[i].textContent.split('');
  words[i].innerHTML = '';

  text.forEach((letter, index) => {
    const span = document.createElement('span');
    const textnode = document.createTextNode(letter);
    span.appendChild(textnode);
    words[i].appendChild(span);
  });
}

div {
  width: 150px;
  margin: 0 auto;
}

.tracking {
  margin: 0;
  padding: .5rem;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF;
  display: flex;
  justify-content: space-between;
}

div div:nth-of-type(1) {
  background: red;
}
div div:nth-of-type(2) {
  background: orange;
}
div div:nth-of-type(3) {
  background: lightgrey;
}
div div:nth-of-type(4) {
  background: black;
}

Answer 3

var d = document.getElementById("master");
// set your margin... depends from font style
  var margin= 2;
  function font(){
  var lett = document.getElementById("master").clientWidth;
  

  setInterval(function(){font()},0)}

 function getCount(matchResult) {
  return matchResult ? matchResult.length : 0;
}


function alert(){
var pm = document.getElementById("master").querySelectorAll('*');
  var num ;
  for (num = 0; num < pm.length; num++){
  var str = pm[num].textContent;
var countA = getCount(str.match(/A/g));
var countB = getCount(str.match(/B/g));
var countC = getCount(str.match(/C/g));
var countD = getCount(str.match(/D/g));
var countE = getCount(str.match(/E/g));
var countF = getCount(str.match(/F/g));
var countG = getCount(str.match(/G/g));
var countH = getCount(str.match(/H/g));
var countI = getCount(str.match(/I/g));
var countJ = getCount(str.match(/J/g));
var countK = getCount(str.match(/K/g));
var countL = getCount(str.match(/L/g));
var countM = getCount(str.match(/M/g));
var countN = getCount(str.match(/N/g));
var countO = getCount(str.match(/O/g));
var countP = getCount(str.match(/P/g));
var countQ = getCount(str.match(/Q/g));
var countR = getCount(str.match(/R/g));
var countS = getCount(str.match(/S/g));
var countT = getCount(str.match(/T/g));
var countU = getCount(str.match(/U/g));
var countV = getCount(str.match(/V/g));
var countW = getCount(str.match(/W/g));
var countX = getCount(str.match(/X/g));
var countY = getCount(str.match(/Y/g));
var countZ = getCount(str.match(/Z/g));
var counta = getCount(str.match(/a/g));
var countb = getCount(str.match(/b/g));
var countc = getCount(str.match(/c/g));
var countd = getCount(str.match(/d/g));
var counte = getCount(str.match(/e/g));
var countf = getCount(str.match(/f/g));
var countg = getCount(str.match(/g/g));
var counth = getCount(str.match(/h/g));
var counti = getCount(str.match(/i/g));
var countj = getCount(str.match(/j/g));
var countk = getCount(str.match(/k/g));
var countl = getCount(str.match(/l/g));
var countm = getCount(str.match(/m/g));
var countn = getCount(str.match(/n/g));
var counto = getCount(str.match(/o/g));
var countp = getCount(str.match(/p/g));
var countq = getCount(str.match(/q/g));
var countr = getCount(str.match(/r/g));
var counts = getCount(str.match(/s/g));
var countt = getCount(str.match(/t/g));
var countu = getCount(str.match(/u/g));
var countv = getCount(str.match(/v/g));
var countw = getCount(str.match(/w/g));
var countx = getCount(str.match(/x/g));
var county = getCount(str.match(/y/g));
var countz = getCount(str.match(/z/g));
var countspace = getCount(str.match(/ /g));
var groupa = 22*(counti+countj+countl);
var groupb = 28*(countI+countf+countt);
var groupc = 33*(countr);
var groupd = 50*(countJ+countc+countk+counts+countv+countx+county+countz);
var groupe = 56*(countL+counta+countb+countd+counte+countg+counth+countn+counto+countp+countq+countu);
var groupf = 61*(countF+countT+countZ);
var groupg = 67*(countA+countB+countE+countK+countP+countS+countV+countX+countY);
var grouph = 72*(countC+countD+countH+countN+countR+countU+countw);
var groupi = 78*(countG+countO+countQ);
var groupj = 83*(countM+countm);
var groupk = 94*(countW);
var groupl = 28*(countspace);

var totalsize = (groupa+groupb+groupc+groupd+groupe+groupf+groupg+grouph+groupi+groupj+groupk+groupl)/100;
var lett = pm[num].clientWidth;
var final = Math.floor(lett / totalsize) ;
pm[num].style.fontSize=final-margin+"px";
}
setInterval(function(){alert()},0)
}


window.onload = function(){ 
  
  font();
  alert();

}


	

div {text-align:center;
width:350px;
margin:0px;
padding:0px;}
p{
background-color:gray;
margin:0px;
padding:0px;
color:white}
.orange{
background-color:orange;}
.red{
background-color:red;}

<body>
<div id="master">
 <p>Text using font-master.js </p>
 <p>How simply is that </p>
 <p class="orange">Hello</p>
 <p class="red">Project</p>
</div>

</body>

您可以使用我的js。插件简单易用，免费使用： https://github.com/foxreaper/font-master

文本将适合您的div或sreen大小...如果有任何问题，请告诉我。