ફોન્ટના કદ બદલવા માટે EMS નો ઉપયોગ કરવો
જ્યારે તમે કોઈ વેબ પૃષ્ઠ બનાવી રહ્યાં છો, ત્યારે મોટાભાગના વ્યાવસાયિકો ભલામણ કરે છે કે તમે ઈએમએસ, એક્સએસ, ટકાવારી અથવા પિક્સેલ્સ જેવા સાપેક્ષ માપ સાથે ફોન્ટ્સ (અને હકીકતમાં, બધું) નું કદ કરો. આ એટલા માટે છે કે કોઈ વ્યક્તિ તમારી સામગ્રીને જોઈ શકે છે તે તમે ખરેખર જુદી જુદી રીતે જાણતા નથી અને જો તમે સંપૂર્ણ માપ (ઇંચ, સેન્ટીમીટર, મિલીમીટર, પોઇન્ટ અથવા પિકાસ) નો ઉપયોગ કરો છો તો તે વિવિધ ઉપકરણોમાં પૃષ્ઠની પ્રદર્શન અથવા વાંચી શકાય તેવી અસરને અસર કરી શકે છે.
અને W3C આગ્રહ રાખે છે કે તમે કદ માટે ems નો ઉપયોગ કરો.
પરંતુ કેટલો મોટો છે એમ?
ડબલ્યુ 3 સી એમના જણાવ્યા પ્રમાણે:
"તત્વના 'ફૉન્ટ-સાઇઝ' ગુણધર્મની ગણતરી કરેલ મૂલ્ય જેટલું છે જેનો તેનો ઉપયોગ થાય છે. અપવાદ એ છે કે જ્યારે 'એમ' 'ફૉન્ટ-આસ્ક' પ્રોપર્ટીના મૂલ્યમાં થાય છે, તે સ્થિતિમાં તે સંદર્ભ આપે છે પિતૃ તત્વના ફોન્ટ કદ પર. "
બીજા શબ્દોમાં કહીએ તો, ઇએમએસ પાસે સંપૂર્ણ કદ નથી. તેઓ તેમના કદ મૂલ્યો જ્યાં તેઓ છે તેના આધારે લાવે છે. મોટાભાગના વેબ ડીઝાઇનરો માટે , આનો અર્થ એ છે કે તેઓ વેબ બ્રાઉઝરમાં છે, તેથી 1 ઇમ ઊંચું ફોન્ટ તે બ્રાઉઝરના ડિફૉલ્ટ ફોન્ટ કદ જેટલું જ કદ છે.
પરંતુ ડિફોલ્ટ કદ કેટલું ઊંચું છે? ગ્રાહકો 100% ચોક્કસ હોવાની કોઈ રીત નથી, કારણ કે ગ્રાહકો તેમના બ્રાઉઝર્સમાં તેમના ડિફૉલ્ટ ફૉન્ટનું કદ બદલી શકે છે, પરંતુ મોટાભાગના લોકોને તમે એમ ન ધારણ કરી શકો છો કે મોટાભાગના બ્રાઉઝર્સ પાસે 16px નું ડિફૉલ્ટ ફોન્ટ માપ છે. તેથી મોટા ભાગના વખતે 1em = 16px .
પિક્સેલ્સમાં વિચારો, મેઝર માટે EMS નો ઉપયોગ કરો
એકવાર તમે જાણો છો કે ડિફૉલ્ટ ફોન્ટનું કદ 16 પીએક્સ છે, તો તમે તમારા ગ્રાહકોને પૃષ્ઠને સરળતાથી આકાર આપવા માટે ઇમ્સનો ઉપયોગ કરી શકો છો, પરંતુ તમારા ફોન્ટ કદ માટે પિક્સેલ્સમાં વિચાર કરી શકો છો.
કહો કે તમારી પાસે કદ બદલવાનું માળખું આ જેવું છે:
- હેડલાઇન 1 - 20 પીએક્સ
- હેડલાઇન 2 - 18 પીએક્સ
- હેડલાઇન 3 - 16px
- મુખ્ય ટેક્સ્ટ - 14 પીએક્સ
- સબ ટેક્સ્ટ - 12px
- ફૂટનોટ્સ - 10 પીએક્સ
તમે માપ માટે પિક્સેલ્સનો ઉપયોગ કરીને તેમને તે રીતે વ્યાખ્યાયિત કરી શકો છો, પરંતુ તે પછી કોઈ પણ IE 6 અને 7 નો ઉપયોગ કરીને તમારા પૃષ્ઠને ફરીથી આકાર બદલવા માટે સમર્થ નથી. તેથી તમે કદને ems માં રૂપાંતરિત કરો અને આ માત્ર કેટલાક ગણિતની બાબત છે:
- હેડલાઇન 1 - 1.25ેમ (16 x 1.25 = 20)
- હેડલાઇન 2 - 1.125 મી (16 × 1.125 = 18)
- હેડલાઇન 3 - 1em (1em = 16px)
- મુખ્ય ટેક્સ્ટ - 0.875મ (16 x 0.875 = 14)
- સબ ટેક્સ્ટ - 0.75મ (16 x 0.75 = 12)
- ફૂટનોટ્સ - 0.625મ (16 x 0.625 = 10)
વારસો ભુલી નાખો!
પરંતુ તે બધા ત્યાં નથી ems છે બીજી વસ્તુ જે તમને યાદ રાખવાની જરૂર છે તે એ છે કે તેઓ માતાપિતાના કદ પર લાગી શકે છે. તેથી જો તમે અલગ ફૉન્ટ માપો ધરાવતા નેસ્ટ કરેલ ઘટકો ધરાવો છો, તો તમે અપેક્ષા કરતા મોટા અથવા મોટા ફોન્ટ સાથે અંત લાવી શકો છો.
હમણાં પૂરતું, તમારી પાસે આ જેવી શૈલી શીટ હોઈ શકે છે:
પૃષ્ઠ {ફોન્ટ-કદ: 0.875em; }
.footnote {font-size: 0.625em; }
આના પરિણામે ફૉન્ટ મુખ્ય પાઠ માટે 14px અને 10px અને અનુક્રમે ફૂટનોટ્સ છે. પરંતુ જો તમે ફકરામાં ફૂટનોટ મુકો છો, તો તમે ટેક્સ્ટ સાથે સમાપ્ત કરી શકો છો જે 10px કરતા 8.75 પીએક્સ છે. તેને જાતે અજમાવો, ઉપરના CSS અને દસ્તાવેજમાં નીચે આપેલા HTML ને આ મૂકો:
આ ફોન્ટ ઊંચાઈમાં 14 પીએક્સ અથવા 0.875 ઇએમએસ છે.
આ ફકરોમાં ફૂટનોટ છે
જ્યારે આ માત્ર એક ફુટનોટ ફકરો છે
ફૂટનોટ ટેક્સ્ટ 10px પર વાંચવા માટે મુશ્કેલ છે, તે 8.75px પર લગભગ અસ્પષ્ટ છે.
તેથી, જ્યારે તમે ems નો ઉપયોગ કરી રહ્યાં છો, ત્યારે તમારે પિતૃ ઑબ્જેક્ટ્સનાં કદ વિશે ખૂબ જ વાકેફ રહેવાની જરૂર છે, અથવા તમે તમારા પૃષ્ઠ પર કેટલાક ખરેખર વિચિત્ર કદના તત્વો સાથે સમાપ્ત થશો.