ওয়েবপৃষ্ঠায় অ্যাপলের নতুন সান ফ্রান্সিসকো ফন্ট কীভাবে ব্যবহার করবেন

Question

আমি কোনও সাইটে নতুন সান ফ্রান্সিসকো ফন্টটি ব্যবহার করতে চাই। আমি চেষ্টা করেছিলাম:

font: 'San Francisco', Helvetica, Arial, san-serif;

কোন লাভ হয়নি। আমি এই প্রশ্নের উত্তর চেষ্টা করেছি , তবে @font-faceএখানে সমাধান নয়।

Comments

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

— স্পার্কি

Answer 1

অ্যাপলের নতুন সিস্টেম ফন্টটি প্রকাশ্যে প্রকাশিত হয়নি। অ্যাপল সিস্টেম ফন্টের নামগুলি বিমূর্ত করা শুরু করেছে:

এই বিমূর্তনের জন্য অনুপ্রেরণা তাই অপারেটিং সিস্টেমটি কোনও নির্দিষ্ট ওজনে কোন মুখটি ব্যবহার করতে হবে তা আরও ভাল পছন্দ করতে পারে। অ্যাপল ফন্টের বৈশিষ্ট্যগুলিতেও কাজ করছে, যেমন বাছাইযোগ্য "6" এবং "9 ″ গ্লাইফ বা নন-মনসোপাসেবল সংখ্যাগুলি। এটি আমার অনুমান যে তারা ওয়েবেও এই বৈশিষ্ট্যগুলি আনতে চাই।

সাফারি এবং ফায়ারফক্স এর জন্য এসএফ ব্যবহার করে -apple-system; ক্রোম স্বীকৃতি দেয় BlinkMacSystemFont:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

এছাড়াও অন্যান্য বিভিন্নতা রয়েছে:

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

আপনি নিম্নলিখিত ফ্রিডল এ ডেমো করতে পারেন; বেশিরভাগ এখনও সমর্থিত নয়: http://jsfiddle.net/v94gw9nx/

আমি ক্রেগ হোকেনবেরির নিবন্ধ থেকে আমার তথ্য পেয়েছি যা ফন্টটি ব্যবহার সম্পর্কে অনেক দুর্দান্ত তথ্য রয়েছে: http://furbo.org/2015/07/09/i-left-my-system-fouts-in-san-francisco/

এছাড়াও বিমূর্ত সিস্টেম ফন্ট ব্যবহার সম্পর্কে সার্ফিন 'সাফারি ব্লগের কিছু দুর্দান্ত তথ্য: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

এবং স্পষ্টতই অ্যাপল ডাব্লু 3 সি এর সাথে সিএসএসে জেনেরিক "সিস্টেম" ফন্টের নামটি ব্যবহার করে মানক করার জন্য কাজ করছে। https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

আপনার নিজের ব্যক্তিগত ব্যবহারের জন্য এসএফ ফন্ট .otf ফাইলগুলি ডাউনলোড করুন: https://developer.apple.com/fouts/

Comments

অথবা আপনি শুধু হরফ নামে মত ব্যবহার করতে পারেনSanFranciscoText-Regular

যদি সারণীতে প্রদর্শনের জন্য মনসপোসেস নম্বরগুলির প্রয়োজন হয় তবে -apple-systemএটি CSS এর মাধ্যমে এটি সমর্থন করে font-variant-numeric: tabular-nums;।

— Palimondo

@ j08691, লাইসেন্স কি?

— পেসারিয়ার

@ ব্রায়ানব্রাইস এটি এল ক্যাপের জন্য একটি হ্যাক ছিল। এটি আর কাজ করে না, আমি মনে করি এটি বলা হয় .SF NS Textএবং .SF NS Displayএখন, তবে আপনার সেগুলি ব্যবহার করা উচিত নয়। আমি ব্যবহার করতাম -apple-system। SF Text/ SF Proআপনি যদি ফন্টটি ম্যানুয়ালি ইনস্টল করেন তবেই কাজ করুন।

দৃশ্যত -system-uiক্রোম এবং সাফারিতে নতুন স্ট্যান্ডার্ড উপায় way (আমি আপনার দুর্দান্ত উত্তর থেকে ক্রেডিট চুরি করতে চাই নি তাই আমি এটি কেবল মন্তব্যে রেখেছি fur furbo.org/2018/03/28/system-fouts-in-css )

— উইল শিপলি

Answer 2

গৃহীত উত্তর সহ বর্তমানের উত্তরগুলির মধ্যে কোনও অ্যাপল-এর ​​সান ফ্রান্সিসকো ফন্ট সিস্টেমগুলিতে ব্যবহার করবে না যেগুলিতে এটি সিস্টেম ফন্ট হিসাবে ইনস্টল করা নেই। যেহেতু প্রশ্নটি "আমি কীভাবে কোনও ওয়েবপৃষ্ঠায় ওএস এক্স সিস্টেম ফন্ট ব্যবহার করব না" সঠিক সমাধানটি হ'ল ওয়েব ফন্টগুলি ব্যবহার করা:

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

উৎস

Comments

যদি কেউ সাহসী চান: সানফ্রান্সিস্কোডিসপ্লে-বোল্ড-ওয়েবফন্ট.উফ

— স্নো

দ্রষ্টব্য: এই উত্তরটি অ্যাপলের ফন্ট লাইসেন্স শর্তাদি লঙ্ঘন করেছে , যা জানিয়েছে যে "[...] আপনি কেবল অ্যাপল ফন্ট ব্যবহার করতে পারবেন অ্যাপলের আইওএস, আইপ্যাডএস, ম্যাকোস বা টিভিওএসে চলমান সফ্টওয়্যার পণ্যগুলিতে ব্যবহারকারীর ইন্টারফেসগুলির মক আপগুলি তৈরি করতে ly অপারেটিং সিস্টেম, প্রযোজ্য হিসাবে " ।

— তেহ

Answer 3

শেষবার পরীক্ষিত: মার্চ 2018

---

প্রশ্ন সম্বোধন করতে

ওয়েবপৃষ্ঠায় অ্যাপলের নতুন সান ফ্রান্সিসকো ফন্ট কীভাবে ব্যবহার করবেন

font-family: -apple-system, system-ui, BlinkMacSystemFont;

বা (এমনকি ছোট):

font-family: -apple-system, BlinkMacSystemFont;

যথেষ্ট করা উচিত

আপনি যদি একাধিক প্ল্যাটফর্মে সিস্টেম ফন্টে ডিফল্ট করতে চান তবে আমি প্রস্তাব দিই:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

• -apple-system- সাফারিতে সান ফ্রান্সিসকো (ম্যাক ওএস এক্স এবং আইওএসে); ম্যাক ওএস এক্স এর পুরানো সংস্করণে নিউ হেলভেটিকা ​​এবং লুসিদা গ্র্যান্ডে e
• system-ui - প্রদত্ত প্ল্যাটফর্মে ডিফল্ট ইউআই ফন্ট।
• BlinkMacSystemFont- -apple-systemম্যাক ওএস এক্সে ক্রোমের সমতুল্য
• "Segoe UI" - উইন্ডোজ (ভিস্তা +) এবং উইন্ডোজ ফোন।
• Roboto - অ্যান্ড্রয়েড (আইসক্রিম স্যান্ডউইচ (4.0) +) এবং ক্রোম ওএস।
• Ubuntu - উবুন্টুর সমস্ত সংস্করণ।

গিথুব সম্পর্কে নিম্নলিখিত বিষয়টি থেকে ধার নেওয়া হয়েছে ।

আপনি সিএসএস-ট্রিকস উপর এই নিবন্ধে অন্যান্য ওএস বা তাদের পুরানো সংস্করণগুলির জন্য ফন্টগুলি সন্ধান করতে পারেন ।

Comments

আপনি কি নিশ্চিত যে এটি আসলে সান ফ্রান্সিসকো যা আইওএস-এ রেন্ডারিংয়ের জন্য ব্যবহৃত হচ্ছে? আইওএস 12 এ (সিমুলেটার) এর মতো দেখাচ্ছে না; আইওএস 13 এ দেখে মনে হচ্ছে এটি সমস্ত দেখায় তবে সমস্ত গ্লাইফ পাওয়া যায় না ।

— ফ্যাবিয়েন স্নোওয়ার্ট

@ ফ্যাবিএনসনওয়ার্ট, না আমি আইওএস 12 এবং 13 সম্পর্কে নিশ্চিত নই That's সে কারণেই আমি উত্তরের শীর্ষে তারিখ যুক্ত করেছি (অর্থাত উত্তরটি এখন 2 বছরেরও বেশি পুরানো, এবং আইওএস 12 প্রকাশের আগে পোস্ট করা হয়েছিল)।

Answer 4

-অ্যাপল-সিস্টেম আপনাকে সাফারিতে সান ফ্রান্সিসকো বাছাই করতে দেয়। ব্লিংম্যাকসিস্টেমফন্ট হ'ল ক্রোমের সাথে সম্পর্কিত বিকল্প।

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

রোবোটো বা হেলভেটিকা ​​নিউ সান-সেরিফের আগেও ফ্যালব্যাক হিসাবে সন্নিবেশ করা যেতে পারে।

https://www.smashingmagazine.com/2015/11/using-system-ui-fouts-practical-guide/#details-of-approach-a (কীভাবে বা পূর্বে http://furbo.org/2015/07/ ০৯ / আই-বাম-আমার-সিস্টেম-ফন্ট-ইন-সান-ফ্রেঞ্চিস্কো / বিশদ ব্যাখ্যা করার জন্য দুর্দান্ত কাজ করুন।

Answer 5

ব্যবহারকারী এল ক্যাপটেনের বা উচ্চতর চলমান, এটা কাজ করবে ক্রোম সঙ্গে

font-family: 'BlinkMacSystemFont';

Comments

এ সম্পর্কে আপনার কোনও অফিসিয়াল (বা অন্যথায়) নথির কোনও লিঙ্ক আছে?

— মোশে কাটজ

Answer 6

অ্যাপল সিস্টেম ফন্টগুলি এগিয়ে চলেছে ab এই সুবিধাটিতে নতুন জেনেরিক পরিবারের নাম-অ্যাপল-সিস্টেম ব্যবহার করা হয়েছে। সুতরাং নীচের মতো কিছু আপনার পছন্দসইটি পাবেন।

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

Comments

এইচটিএমএল ক্যানভাস সম্পর্কে কি?

— ক্লিয়ারলাইট

Answer 7

এটি বরং এটি পুরানো প্রশ্নের আপডেট। আমি একটি ওয়েবসাইটে নতুন এসএফ প্রো ফন্টগুলি ব্যবহার করতে চেয়েছিলাম এবং উপরে উল্লিখিত (অ্যাপলসিয়াল.এস 3.amazonaws.com) ছাড়াও কোনও ফন্ট সিডিএন পাইনি।

স্পষ্টতই, এটি অ্যাপল দ্বারা অনুমোদিত কোনও অফিসিয়াল কন্টেন্ট সংগ্রহস্থল নয়। আসলে, আমি অ্যাপল ফন্টগুলি সরবরাহ করে এমন কোনও অফিসিয়াল ফন্টের সংগ্রহস্থল খুঁজে পাইনি, যা ওয়েব বিকাশকারীদের দ্বারা ব্যবহারের জন্য প্রস্তুত।

এবং এর একটি কারণ রয়েছে - আপনি যদি https://developer.apple.com/fouts/ থেকে নতুন এসএফ প্রো এবং অন্যান্য ফন্টগুলি ডাউনলোড করার সাথে আসে লাইসেন্স চুক্তিটি পড়েন - এটি প্রথম কয়েকটি অনুচ্ছেদে খুব স্পষ্টভাবে উল্লেখ করেছে:

[...] অ্যাপল আইওএস, ম্যাকোস বা টিভিওএস অপারেটিং সিস্টেমগুলিতে প্রযোজ্য হিসাবে সফটওয়্যার পণ্যগুলিতে ব্যবহার করার জন্য আপনি কেবল ইউজার ইন্টারফেসের মক আপগুলি তৈরি করতে অ্যাপল ফন্টটি ব্যবহার করতে পারেন। পূর্ববর্তী ডানটিতে কেবল আইওএস, ম্যাকোস বা টিভিওএস এ চলমান এমন সফ্টওয়্যার পণ্যগুলির স্ক্রিন শট, চিত্র, মক-আপ বা অন্যান্য চিত্র, ডিজিটাল এবং / বা মুদ্রণে অ্যাপল ফন্টটি দেখানোর অধিকার অন্তর্ভুক্ত রয়েছে। [...]

এবং:

এগুলির জন্য সুস্পষ্টভাবে সরবরাহ করা ব্যতীত আপনি অ্যাপল হরফ কোনও ডকুমেন্টেশন, আর্টওয়ার্ক, ওয়েবসাইট সামগ্রী বা অন্য কোনও কাজের পণ্য বিতরণ, তৈরি, বিকাশ, প্রদর্শন বা অন্যথায় বিতরণ করতে পারবেন না।

আরও:

অন্যথায় স্পষ্টভাবে অনুমতি দেওয়া ব্যতীত [...] (i) কেবলমাত্র একজন ব্যবহারকারী একসাথে অ্যাপল ফন্ট ব্যবহার করতে পারে এবং (ii) আপনি অ্যাপল ফন্টটি এমন কোনও নেটওয়ার্কে উপলব্ধ করতে পারবেন না যেখানে এটি একাধিক কম্পিউটার দ্বারা চালিত বা ব্যবহৃত হতে পারে over একই সাথে

আমার জন্য আর কোন প্রশ্ন। অ্যাপল স্পষ্টভাবে তাদের ফন্টগুলি তাদের পণ্যের বাইরে ওয়েবে ভাগ করতে চায় না।

Comments

গৃহীত উত্তরে আপনি দেখতে পাবেন যে আমরা অ্যাপল ওয়েবফন্টগুলি দিচ্ছি না, আমরা ব্রাউজারকে অ্যাপল সিস্টেম ফন্ট ব্যবহার করতে বলছি, যা বর্তমানে এসএফ is আপনি অবশ্যই এসএফপ্রো পরিবেশন করতে পারবেন না তবে আপনি এটি অ্যাপল ডিভাইসযুক্ত লোকদের জন্য ব্যবহার করতে পারবেন তা নির্দিষ্ট করতে পারেন।

— অজৈবিক

Answer 8

আপনি সরাসরি ডেটাবেস থেকে পরিবেশন করা অ্যাপল সিস্টেম ফন্ট ব্যবহার করতে পারবেন না। এটি লাইসেন্সের বিরুদ্ধে, তবে আপনি এটি হাই সিয়েরার চেয়ে বেশি ম্যাক সিস্টেমগুলির জন্য ব্যবহার করতে পারেন

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

অথবা আপনি এটি ব্যবহার করতে পারেন:

font-family: 'BlinkMacSystemFont';

Answer 9

সর্বশেষ ২০১৫ সালে পরীক্ষা করা হয়েছিল

এই সমাধানটি শেষ পছন্দ হিসাবে ব্যবহার করা উচিত, যখন অন্যান্য সমাধানগুলি কাজ করে না।

---

আসল উত্তর:

ম্যাকোস ক্রোম / সাফারিতে কাজ করুন

body { font-family: '.SFNSDisplay-Regular', sans-serif; }

Comments

একটি কোড ব্লকই ভাল উত্তর সরবরাহ করে না। ব্যাখ্যা যোগ করুন।

— লুই বারানকিরো

এটিই কেবলমাত্র আমার জন্য একটি পরমাণু সিনট্যাক্স স্টাইলশিটে কাজ করেছিল।

— কাই

নোট করুন যে আইওএসে কাজ করে না যখন -apple-system, 'BlinkMacSystemFont'আইওএস Chrome + সাফারি এবং ওএস এক্স ক্রোম + সাফারিতে কাজ করে।

— চার্লি শ্লিসার 21

এছাড়াও, আমার এটিও উল্লেখ করা উচিত যে এটি আইওএসে কাজ করে না তার কারণ হ'ল আইওএসের .SFUI শুরু করার সময় সিস্টেম ফন্টগুলি ম্যাকোজে। এসএফএনএস দিয়ে শুরু হয়। আপনার যদি কোনও কারণে একেবারে এটি করতেই হয় তবে এটি ঠিক করে ফেলবে… তবে তা করবেন না!

— জোনাথন থর্নটন

ধন্যবাদ, আমি এটি এসএফ ফন্টে প্রয়োগ করেছি এবং দুর্দান্ত কাজ করছি। অ্যাপল-সিস্টেমের সাথে সমস্যাটি সমস্ত সামগ্রীতে প্রয়োগ করা হয়, এবং ফন্ট-পরিবারের ওভাররাইড শৈলী।

— হার্দিক দারজি