সিএসএস: 100% হরফ আকার - 100% কি?

Question

আছে অনেক প্রবন্ধ এবং প্রশ্ন সম্পর্কে শতাংশ মাপের বনাম অন্যান্য আকারের ফন্ট। তবে, শতাংশ-মানটির রেফারেন্স কী হবে তা আমি খুঁজে বের করতে পারি না। আমি বুঝতে পারি এটি 'সমস্ত ব্রাউজারে একই আকার'। আমি এটি পড়লাম, উদাহরণস্বরূপ:

শতাংশ (%): শতাংশ ইউনিট অনেকটা "Em" ইউনিটের মতো, কয়েকটি মৌলিক পার্থক্যের জন্য সংরক্ষণ করে। প্রথম এবং সর্বাগ্রে, বর্তমান ফন্টের আকারটি 100% (অর্থাৎ 12pt = 100%) এর সমান। শতাংশ ইউনিট ব্যবহার করার সময়, আপনার পাঠ্য মোবাইল ডিভাইসগুলির জন্য এবং অ্যাক্সেসযোগ্যতার জন্য পুরোপুরি স্কেলযোগ্য remains

সূত্র: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

তবে আপনি যদি "অর্থাৎ 12 পিটি = 100%" বলে থাকেন তবে এর অর্থ আপনার প্রথমে সংজ্ঞা দিতে হবে font-size: 12pt। এটি কি এইভাবে কাজ করে? আপনি প্রথমে একটি আকারকে একটি নিখুঁত পরিমাপে সংজ্ঞায়িত করেন এবং তারপরে এটি '100%' হিসাবে উল্লেখ করেন? অনেক নমুনা বলে যে এটি রাখা দরকারী:

body {
  font-size: 100%;
}

সুতরাং এটি করে, ফন্টের আকারটি কী সম্পর্কিত? আমি লক্ষ্য করেছি যে আমার স্ক্রিনে আমি যে আকারটি দেখতে পাই তা প্রতিটি ফন্টের জন্য আলাদা হয়। উদাহরণস্বরূপ, আরিয়াল টাইমস নিউ রোমানের চেয়ে বড় দেখায়। এছাড়াও, যদি আমি শুধু এই করতে হবে, শরীর আকার = 100%, হবে যে গড় এটি সকল ব্রাউজারে একই হবে? বা কেবলমাত্র যদি আমি প্রথমে একটি নিখুঁত মান সংজ্ঞায়িত করি?

আপডেট, স্যাট জুলাই 23

আমি সেখানে পৌঁছে যাচ্ছি, তবে দয়া করে আমাকে সহ্য করুন।

সুতরাং, যদি আমি সঠিকভাবে বুঝতে পারি তবে% মান ডিফল্ট ব্রাউজারের ফন্টের আকারের সাথে সম্পর্কিত। ওয়েল, এটি দুর্দান্ত তবে আবার আমাকে আরও কয়েকটি প্রশ্ন দেয়:

1. এই স্ট্যান্ডার্ড আকারটি প্রতিটি ব্রাউজার সংস্করণে সর্বদা এক হয়, না সংস্করণগুলির মধ্যে সেগুলি পরিবর্তিত হয়?
2. আমি! গুগল ক্রোমের জন্য সেটিংস (নীচের চিত্রটি দেখুন) খুঁজে পেয়েছি (এর আগে এর আগে কখনও দেখেনি!) এবং আমি স্ট্যান্ডার্ড "সেরিফ", "সানস-সেরিফ" এবং "মনোস্পেস" সেটিংস দেখতে পাচ্ছি। তবে আমি অন্যান্য ফন্টের জন্য এটি কীভাবে ব্যাখ্যা করব? বলুন আমি সংজ্ঞায়িত font: 100% Georgia;করব, ব্রাউজারটি কোন আকার নেবে? এটি কি সেরিফের জন্য স্ট্যান্ডার্ড আকারের সন্ধান করবে বা ব্রাউজারের জন্য "জর্জিয়া" হরফ একটি মান মাপসই আছে?
3. বেশ কয়েকটি ওয়েবসাইটে আমি ভালো জিনিস পড়িSizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today । তবে আমি এখন যা শিখছি সেখান থেকে আমি বিশ্বাস করি যে আপনি পুনরায় আকার পরিবর্তনযোগ্য পাঠ্য (% বা ইম ব্যবহার করে, তারা এই উদ্ধৃতিতে যা পছন্দ করেন) এর মধ্যে বা 'ব্রাউজারগুলিতে সঠিক, সামঞ্জস্যযুক্ত ফন্ট-মাপের' (px অথবা বেস হিসাবে পিটি)। এটা কি সঠিক?

গুগল সেটিংস:

আপনি যদি পরিপূর্ণ মানগুলিতে আকারটি সংজ্ঞায়িত না করেন তবে জিনিসগুলি এমনভাবে দেখতে পারে বলে আমি মনে করি ।

Answer 1

ব্রাউজারের ডিফল্ট যা ফায়ারফক্সের জন্য 16pt এর মতো কিছু, আপনি ফায়ারফক্সের বিকল্পগুলিতে গিয়ে, সামগ্রী ট্যাবে ক্লিক করে এবং ফন্টের আকারটি পরীক্ষা করে দেখতে পারেন। আপনি অন্যান্য ব্রাউজারগুলির জন্যও এটি করতে পারেন।

আমি ব্যক্তিগতভাবে আমার ওয়েবসাইটগুলির ডিফল্ট ফন্টের আকারটি নিয়ন্ত্রণ করতে চাই, তাই প্রতিটি পৃষ্ঠায় অন্তর্ভুক্ত একটি সিএসএস ফাইলে আমি বডি ডিফল্ট সেট করব, এরকম:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

এখন আমার সমস্ত এইচটিএমএল ট্যাগগুলির ফন্ট-আকার 14px এর ফন্টের আকারে উত্তরাধিকারী হবে।

বলুন যে আমি সমস্ত ডিভাইসগুলির চেয়ে শরীরের চেয়ে 10% বড় হরফের আকার চাই, আমি কেবল এটি করি:

div {
    font-size: 110%
}

এখন যে কোনও ব্রাউজার যা আমার পৃষ্ঠাগুলি দেখে তা স্বয়ংক্রিয়ভাবে সমস্ত ডিভডগুলি শরীরের চেয়ে 10% বড় করে দেবে, যা 15.4px এর মতো কিছু হওয়া উচিত।

যদি আমি সমস্ত ডিভের ফন্ট-আকারটি 10% ছোট হতে চাই তবে আমি করব:

div {
    font-size: 90%
}

এটি সমস্ত ডিভের 12.6px এর ফন্ট-আকার তৈরি করবে।

এছাড়াও আপনার জানা উচিত যেহেতু ফন্ট-আকারটি উত্তরাধিকার সূত্রে প্রাপ্ত, তাই প্রতিটি নেস্টেড ডিভ ফন্টের আকারে 10% হ্রাস পাবে, সুতরাং:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

অভ্যন্তরীণ ডিভের 11.34px এর ফন্ট-আকার (12.6px এর 90%) থাকবে, যা উদ্দেশ্যযুক্ত নয়।

এটি ব্যাখ্যায় সহায়তা করতে পারে: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Comments

ধন্যবাদ! এটি এটি অনেক পরিষ্কার করে তোলে। তবে আমি এখনও% ব্যবহার করার সময় নিখুঁততা বা 'ধারাবাহিকতা' দাবি করার নিবন্ধগুলি নিয়ে ভাবছি। যদি আমি আপনার উত্তরটি সঠিকভাবে ব্যাখ্যা করি তবে এটি বেশ ভুল বলে মনে হচ্ছে। আমি কিছু অতিরিক্ত প্রশ্ন দিয়ে প্রশ্নটি আপডেট করেছি ...

— ব্যবহারকারীর 852091

জিজ্ঞাসা করা প্রশ্নের উত্তর (কীসের 100%?) ভুল, এখানে বেশ কয়েকটি ভুল রয়েছে (সমস্ত উপাদানই ফন্টের আকারের উত্তরাধিকারী হয় না), এবং এমন প্রশ্নে নোট এবং মতামত রয়েছে যা সম্পর্কে জিজ্ঞাসা করা হয়নি।

— Jukka K. Korpela

পিক্সেল ঘনত্ব সত্যিই আমলে নেওয়া উচিত। 4K ফোনের পৃষ্ঠার 100% এমন কিছু মনে করবে যা এর হাজার হাজার পিক্সেল অনুভূমিক এবং উল্লম্ব রেজোলিউশন রয়েছে। NO_SCALE, যেমন ওয়েব-অ্যাপ্লিকেশন ইত্যাদির সাথে ফ্ল্যাশ সামগ্রীর জন্য, নিয়ন্ত্রণগুলি ক্ষুদ্রতর হবে, বিশেষত মেনুগুলি, উদাহরণস্বরূপ কোনও LG G3 এ। এটি পিক্সেল আকারের কিছু HTML সামগ্রীর জন্যও সমান সত্য equally পুরোপুরি আপেক্ষিক ইউনিট বা জাভাস্ক্রিপ্ট-ভিত্তিক গতিশীল পুনরায় আকারের ব্যবহারের মাধ্যমে এক উপায় বা অন্য কোনওভাবে, পিক্সেল ঘনত্ব (প্রতি ইঞ্চিতে পিক্সেল) অবশ্যই বিবেচনায় নেওয়া উচিত।

— ট্রায়ঙ্কো

নিশ্চিত করা হয়েছে যে আধুনিক ব্রাউজারগুলি এখনও ডিফল্ট হিসাবে 12pt / 16px @ 96ppi ব্যবহার করে। সম্পর্কিত নোটে, আপনি সর্বদা মূল (এইচটিএমএল উপাদান বা ব্রাউজার ডিফল্ট) এর সাথে সম্পর্কিত কোনও নির্দিষ্ট উপাদান স্কেল করতে "ইম" এর পরিবর্তে "রিম" ব্যবহার করতে পারেন। তুলনামূলক আকারের উপাদানগুলির একটি জটিল শ্রেণিবিন্যাসের সাথে দরকারী হতে পারে।

— বিউজর

আপনার , অথবা , এর font-sizeমতো আপেক্ষিক ইউনিট ব্যবহার করে সেট করা ভাল । ব্যবহার করা ব্রাউজারের ডিফল্ট ফন্টের আকারকে ওভাররাইড করবে! পাঠক পাঠ্য সহজ করার জন্য অনেক ব্যবহারকারী একটি কাস্টম ফন্টের আকার নির্দিষ্ট করে। emrem%px

— mfluehr

Answer 2

আমার বোধগম্যতা হ'ল যখন ফন্টটি নীচে সেট করা থাকে

body {
  font-size: 100%;
}

ব্রাউজারটি সেই ব্রাউজারের ব্যবহারকারীর সেটিংস অনুযায়ী ফন্টটি রেন্ডার করে।

অনুমানটি বলে যে% রেন্ডার করা হয়েছে

প্যারেন্ট উপাদান এর ফন্ট আকারের তুলনায়

http://www.w3.org/TR/CSS1/#font-size

এই ক্ষেত্রে, আমি ব্রাউজারটি কী সেট করা হয়েছে তার অর্থ এটি নিতে।

Comments

আসলে অভিভাবক bodyহয় html। তাই body { font-size: 100%; }100% হতে হবে html, 'গুলি ফন্টের আকার না ব্রাউজার ডিফল্ট। সাধারণত এগুলি একই হয় তবে আপনি কার্যকরভাবে সঠিক are তবে কখনও কখনও আপনি একটি html { font-size: ??? }নিয়ম দেখতে পাবেন ।

— ছারভে

Answer 3

font-sizeসম্পত্তির মানটির একটি শতাংশ পিতামণ্ডলের উপাদানগুলির ফন্টের আকারের সাথে তুলনামূলক । সিএসএস ২.১ এটিকে অস্পষ্ট ও বিভ্রান্তিকরভাবে বলেছেন ("উত্তরাধিকার সূত্রে প্রাপ্ত ফন্টের আকার" হিসাবে উল্লেখ করেছেন), তবে CSS3 পাঠ্যটি এটি খুব স্পষ্টভাবে বলেছে ।

bodyউপাদানটির পিতামাতা হ'ল মূল উপাদান, অর্থাৎ htmlউপাদান। স্টাইল শিটে সেট না করা, মূল উপাদানটির ফন্টের আকার বাস্তবায়ন-নির্ভর। এটি সাধারণত ব্যবহারকারী সেটিংসের উপর নির্ভর করে।

font-size: 100%কোনও স্টাইল শীট যদি তার নিজস্ব ফন্টের আকার নির্ধারণ না করে তবে কোনও উপাদান তার পিতামাতার ফন্টের আকার (একই ফলাফলের দিকে নিয়ে যায়) হিসাবে অনেক ক্ষেত্রে সেট করা অর্থহীন। তবে এটি অন্যান্য স্টাইল শীটের (ব্রাউজার ডিফল্ট স্টাইল শিট সহ) সেটিংসকে ওভাররাইড করতে কার্যকর হতে পারে।

উদাহরণস্বরূপ, কোনও inputউপাদানটির সাধারণত ব্রাউজার স্টাইল শীটে একটি সেটিংস থাকে যা এর ডিফল্ট ফন্টের আকারটি অনুলিপি পাঠ্যের চেয়ে ছোট করে তোলে। আপনি যদি হরফ আকারটি একই করতে চান তবে আপনি সেট করতে পারেন

ইনপুট {ফন্ট-আকার: 100%

জন্য bodyউপাদান কথাটি অপ্রয়োজনীয় সেটিং font-size: 100%যেমন (ব্রাউজারে যে সম্ভবত এখন তাদের তাত্পর্য হারিয়েছে) কিছু ব্রাউজার বাগ বিরুদ্ধে সাহায্যের বিশ্বাস করা হয়, মোটামুটি প্রায়ই ব্যবহার করা হয়।

Comments

একটি উদাহরণ যেখানে font-size:100%উদ্দেশ্যটি পরিবেশন করতে পারে তা হল কুইর্কস মোডে, যেখানে ফন্টের আকারগুলি টেবিলগুলিতে উত্তরাধিকার সূত্রে প্রাপ্ত হয় না। এই স্টাইলের সাহায্যে টেবিলগুলি পিতামাতার ফন্টের আকার পায়। অবশ্যই, তাদের ডান মনের কেউ আর কোয়ার্কস মোড ব্যবহার করে না ...

— মিঃ লিস্টার

Answer 4

এটি ডিফল্ট ব্রাউজারের ফন্ট-আকারের তুলনায় আপনি যদি এটি পিটি বা পিক্সের কোনও মান দিয়ে ওভাররাইড না করেন।

Comments

সুতরাং এই প্রতিটি ব্রাউজার যদি পৃথক হতে পারে?

— ব্যবহারকারী 852091

হ্যাঁ, প্রতিটি ব্রাউজারের ফন্ট-আকার সহ নিজস্ব ডিফল্ট সেটিংস থাকে। এজন্য আপনাকে সাধারণত সিএসএস রিসেট ব্যবহার করতে হয়।

— রকেটআর

এটি ভুল। এটি প্যারেন্ট উপাদানগুলির শতাংশ। আপনি সম্ভবত ডিফল্ট ফন্ট-আকারের শতাংশ অনুভব করছেন কারণ আপনার পিতামাতার উপাদান ডিফল্ট ফন্ট-আকারের উত্তরাধিকার সূত্রে পেয়েছে।

— জেকটম্বো

@ জেকটবামো ঠিক আছে, একেবারে সঠিক নয়। তবে প্রশ্নটিতে উল্লেখ করা হয়েছে body, নির্বিচারে নেস্টেড উপাদান নয়, তাই উত্তরটি একটি ছোট ছোট

— নক্ষত্র

: - / বাদে এটি নেস্টেড কারণ <body> এর পিতামাতা <html>

— জেকটম্বো

Answer 5

দুঃখিত আমি যদি পার্টিতে দেরি করি তবে আপনার সম্পাদনায় আপনি একটি মন্তব্য করেন font: 100% Georgia, যা অন্য উত্তরগুলি প্রতিক্রিয়া জানায় না।

font: 100% Georgiaএবং মধ্যে পার্থক্য আছে font-size:100%; font-family:'Georgia'। যদি এটি সমস্ত শর্টহ্যান্ড পদ্ধতিটি করে থাকে তবে হরফ আকারের অংশটি অর্থহীন হবে। তবে এটি তাদের ডিফল্ট মানগুলিতে অনেকগুলি বৈশিষ্ট্যও নির্ধারণ করে: লাইনের উচ্চতা normal(বা 1.2 এর কাছাকাছি) হয়ে যায় , শৈলীর জন্য নিত্ত (নন-ইটালিক) এবং ওজন (অ-সাহসী)।

এখানেই শেষ. অন্যান্য উত্তরগুলি ইতিমধ্যে সেখানে থাকা সমস্ত কিছুর উল্লেখ করেছিল।

Answer 6

আপনি দৃinc়তার সাথে দেখিয়েছেন যে, font-size: 100%;সমস্ত ব্রাউজারে এটি একই রেন্ডার হবে না। তবে আপনি নিজের সিএসএস ফাইলে আপনার ফন্টের মুখ সেট করবেন, তাই এটি সমস্ত ব্রাউজারে একই (বা ফ্যালব্যাক) হবে।

আমি বিশ্বাস করি font-size: 100%;এটি emবেসড ডিজাইনের সাথে সংযুক্ত করার সময় খুব কার্যকর হতে পারে । হিসাবে এই নিবন্ধটি শো, এই একটি খুব নমনীয় ওয়েবসাইট তৈরি করবে।

কখন এটি দরকারী? আপনার সাইটের যখন দর্শকদের ইচ্ছার সাথে খাপ খাইয়ে নেওয়া দরকার। উদাহরণস্বরূপ একজন প্রবীণ ব্যক্তিকে ধরুন যা তার ডিফল্ট ফন্ট-আকার 24 পিক্সে রেখে দেয়। বা একটি বৃহত রেজোলিউশন সহ একটি ছোট পর্দা সহ এমন কেউ যা তার ডিফল্ট ফন্ট-আকার বাড়ায় কারণ তাকে অন্যথায় স্কুইন্ট করতে হবে। বেশিরভাগ সাইটগুলি ভেঙে যেতে পারে তবে এম-ভিত্তিক সাইটগুলি এই পরিস্থিতিগুলি মোকাবেলা করতে সক্ষম।

Answer 7

সেই ফন্টে ডিফল্ট আকারের সংজ্ঞায়িত।

যদি কেউ আপনার পৃষ্ঠাটি একটি ওয়েব ব্রাউজারে খোলে, একটি ডিফল্ট ফন্ট এবং ফন্ট আকার এটি ব্যবহার করে।

Answer 8

আমার বোঝার মতো এটি আপনার বিষয়বস্তুকে হরফ পরিবার এবং ফন্ট আকারের বিভিন্ন মানগুলির সাথে সামঞ্জস্য করতে সহায়তা করে hus এটি আপনার সামগ্রীকে মাপকেযোগ্য করে তোলে। উত্তরাধিকারী হরফ আকারের বিষয়টি হিসাবে আমরা সর্বদা উপাদানটির জন্য একটি নির্দিষ্ট ফন্টের আকার দিয়ে ওভাররাইড করতে পারি।

Answer 9

১৯৯ TO-এর সমস্ত তারিখের তারিখ অনুসারে , font-sizeপ্যারেন্ট উপাদানগুলির (গণিত) ফন্ট-আকারের ক্ষেত্রে শতাংশের মান ।

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

এটা এত সহজ।

যদি divকোনও আপেক্ষিক ফন্ট-আকার, এর মতো emবা আরও খারাপ হিসাবে ঘোষণা করে তবে কী হবে ?? উপরে "গণিত" দেখুন আপেক্ষিক ইউনিট রূপান্তরিত যাই হোক না কেন পরম ইউনিট।

কেবলমাত্র অবশিষ্ট প্রশ্নটি হল যখন আপনি মূল উপাদানটিতে শতাংশের মান ব্যবহার করেন, তখন যার কোনও পিতামাতা নেই:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

সেক্ষেত্রে, দেখতে "প্রতিলিপি" এই প্রশ্নের। টিএলডিআর: মূল উপাদানটির শতাংশগুলি ব্রাউজারের ডিফল্ট ফন্টের আকারকে বোঝায়, যা ব্যবহারকারী প্রতি পৃথক হতে পারে।

তথ্যসূত্র:

• সিএসএস 1 স্পেস (1996)
• সিএসএস 2.1 স্পেস (2011)
• সিএসএস ফন্ট স্তর 3 স্তর (2013)
• সিএসএস ফন্টস স্তর 3 সম্পাদকের খসড়া (2017)